Flex布局(1)
来源:互联网 发布:淘宝分流是什么意思 编辑:程序博客网 时间:2024/06/05 09:52
文章转载自阮一峰的《Flex布局教程:语法篇》
链接地址
一、什么是Flex布局
任何块级元素以及行级元素都可以定义为flex布局
div{ display: flex;}span{ display: inline-flex;}
Webkit内核的浏览器,必须加上-webkit前缀
.box{ display: -webkit-flex; /* Safari */ display: flex;}
设为Flex布局以后,子元素的float、clear和vertical-align属性都会失效
二、基本概念
看图说话,
- flex容器内的成员称作项目,每一个项目所占水平位置的大小叫做main size,垂直方向上的大小叫做cross size
- 整个flex容器有两个轴线,水平方向的主轴线,垂直方向的交叉线
- 轴线的开始位置start和轴线的结束位置end
三、容器的属性
1、flex-direction:决定主轴的方向(即项目的排列方向)
取值:
- column-reverse:主轴为竖直方向,起点在下端
- column:主轴为竖直方向,起点在上端
- row:主轴为水平方向,起点在左端(默认值)
- row-reverse:主轴为水平方向,起点在右端
分别对应下面的图片
2、flex-wrap:默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
取值:
- nowrap:不换行(默认)
- wrap:换行,第一行在上方
- wrap-reverse:换行,第一行在下方
分别对应下面的图片
(1)nowrap
(2)wrap
(3)wrap-reverse
3、flex-flow:该属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
4、justify-content
:属性定义了项目在主轴上的对齐方式
取值:(这里假设主轴是从左到右)
- flex-start :从主轴的开始位置排列
- flex-end:从主轴结束的位置排列
- center:居中排列
- space-between: 两端对齐,项目之间的间隔都相等
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
对应下面的图示
5、align-items
:定义项目(flex容器内的子元素)在交叉轴上如何对齐
取值:(这里假设主轴是从左到右)
- flex-start :从主轴的开始位置排列
- flex-end:从主轴结束的位置排列
- center:交叉轴的中点对齐
- baseline:项目的第一行文字的基线对齐
- stretch:如果项目未设置高度或设为auto,将占满整个容器的高度(默认值)
对应下面的图示
6、align-content
:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
取值:(这里假设主轴是从左到右)
- flex-start :与交叉轴的起点对齐
- flex-end:与交叉轴的终点对齐
- center:交叉轴的中点对齐
- space-between: 与交叉轴两端对齐,轴线之间的间隔平均分布
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch:轴线占满整个交叉轴(默认值)
对应下面的图示
- Flex布局(1)
- flex布局(1)
- flex布局(弹性布局)
- flex布局(弹性布局)
- FLex布局详解---1
- flex布局1
- Flex布局(一)
- Flex布局(二)
- flex布局(一)
- flex布局(2)
- flex布局(3)
- flex布局(4)
- flex布局(笔记)
- flex布局(2)
- flex布局(3)
- flex布局篇(一)
- flex布局篇(二)
- flex布局(待看)
- grunt和NPM简介
- ClassLoader
- 【Oracle数据库】Oracle数据库基础
- STM32 SPI 学习笔记
- java Collections.sort()实现List排序的默认方法和自定义方法
- Flex布局(1)
- maven生成可执行jar包
- Oracle命令
- hadoop shell命令汇总
- Linux 块设备驱动 (1)
- 神经网络与深度学习(第一章)(五)
- 查询无limit限制的实际记录数
- Redis实用教程之三---Redis数据结构与常用命令
- misc设备