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。
