flex布局(详解)

flex布局

flex布局是什么?
Flex是Flexible Box的缩写,俗称"弹性布局"。
任何一个容易都可以指定为flex布局,例如div等等
行内块元素也可以，例如 span等等
Webkit内核的浏览器，必须加上-webkit前缀。
例如:
div{
display:-webkit-flex;
display:flex
}
注意，设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex概念
flex布局称为flex容器，flex容器默认两根轴：水平主轴和垂直交叉轴。以下概念都围绕水平主轴和垂直交叉轴而定义。
flex属性
共有6个属性，分别是:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1：flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向）。
有四个值:
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
2.flex-wrap
flex-wrap属性当数据足够多一行很拥挤，用来决定是否换行
有三个值:
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
3.flex-flow
lex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
默认值第一个值是flex-direction的值，第二个值是flex-warp的值
4.justify-content
justify-content属性定义了项目在主轴上的对齐方式。
有5个值:
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
5.align-items
align-items属性定义项目在交叉轴上如何对齐。
有5个值:
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
6.align-content
align-content 多行对齐，如果只有一行，不起作用
有6个值:
flex-start: 与交叉点的起点对齐
flex-end: 与交叉点的终点对齐
center: 与交叉点的中心对齐
space-between: 与交叉线两端对齐，轴线间间隔平均分配
space-around: 每根轴线间隔相等
stretch: 轴线占满整个交叉线
应用场景
1.当你创建一个div需要绝对居中就可以使用flex布局
可以通过这两个属性实现
justify-content: center; 主轴居中
align-items: center;交叉轴居中
这样div无论高还是宽都是绝对居中


2.flex也属于响应式布局，所以可以进行flex进行响应式布局.