Properties for the Parent（应用在父元素上）

(flex 盒子)

display: flex

定义父元素为flex元素

flex-direction

子元素的排列方向

row (默认值): 从主轴起点到到主轴终点

Paste_Image.png
row-reverse: 从主轴终点到主轴起点

Paste_Image.png
column: 从侧轴起点到侧轴终点

Paste_Image.png
column-reverse:从侧轴终点到侧轴起点

Paste_Image.png

flex-wrap

子元素在主轴上铺满时，是否换行

Nowrap（默认值）:不换行
Wrap:换行且从顶部到到底部排列
Wrap-reverse:换行且从底部到到顶部排列

flex-flow:flex-direction属性值 flex-wrap属性值;

justify-content

主轴方向对齐方式
定义了沿着主轴对齐。
它帮助分赔剩下多余的空闲空间给所有的flex项目。

flex-start (默认值): flex项目从主轴起点开始无空闲空间地排列在一起
flex-end: flex项目从主轴终点开始无空闲空间地排列在一起
center: flex项目排列在主轴中间，两边空闲空间均匀分批
space-between: 在主轴上的空闲空间均匀地分配到每两个flex项目中间
space-around: 在主轴上的空闲空间均匀地分配到每个flex项目两边

align-items

侧轴对齐方式

stretch (默认值):把所有的元素伸开，所有flex项目的高度以最高的flex项目为准

flex-start: 在主轴上排列的flex项目顶部，对齐侧轴的起点
flex-end: 在主轴上排列的flex项目底部，对齐侧轴的终点
center: 在主轴上排列的flex项目中部，对齐侧轴的中间
baseline: flex项目延文本基线对齐

align-content

当出现多行flex项目时，侧轴方向对齐方式

stretch (默认值): flex盒子和flex项目没设置高度时，盒子高度以高度最高的flex项目为准
flex-start: 多行flex项目顶部对准侧轴起点
flex-end: 多行flex项目底部对准侧轴终点
center: 多行flex项目中部对准侧轴中间，空闲空间均匀分配打破多行flex项目两边
space-between:侧轴方向上，空闲空间均匀分配到每两行flex项目的中间
space-around: 侧轴方向上，空闲空间均匀分配到每行flex项目的两边

Properties for the Children（应用在所有的子元素上）

(flex 项目)

Order：整数编号;

可以正负符号，设置子元素排列的先后顺序号

flex-grow：

如果只有一个子元素设置了flex-grow的值，则这个子元素分配剩下的所有的空闲空间
如果多个子元素设置了flex-grow的值，则按照值的比例来分配剩下的空闲空间

flex-shrink

按照子元素设置的flex-shrink值，来按比例收缩flex项目

flex-basis

设置flex项目的宽度大小，可以是比例也可以是长度单位
如果设置为0,内容不考虑周围的额外空间
如果设置为自动,对其flex-grow值的额外的空间进行分配

Flex:flex-grow flex-shrink flex-basis;

这是缩写flex-grow,flex-shrink flex-basis总和。第二个和第三个参数(flex-shrink和flex-basis)是可选的。默认是0 1。

Flex布局的基本语法和实例