Flex
要点
- 块级侧重垂直方向、行内侧重水平方向，flex布局是与方向无关
- 实现空间自动分配、自动对齐
- 用于简单线性布局、更复杂的布局要交给grid
属性参考
图来自mdn,方便理解
作用在flex容器上
justify-content（主轴对齐）
水平方向子项的对齐和分布方式
flex-start 容器起始位置对齐
flex-end 容器结束位置对齐
center 在容器里（元素所在这一行）居中，即水平居中
space-between 元素之间保持相等距离，首位元素以容器边缘对齐
space-around 相邻元素距离相同，首位元素与容器边缘的距离是元素之间距离的一半
align-content（堆栈伸缩行）
垂直方向每一列flex元素的对齐和分布方式
flex-start 容器起始位置对齐
flex-end 容器结束位置对齐
center 在容器里（元素所在这一列）居中，即垂直
space-between 元素之间保持相等距离，首位元素以容器边缘对齐
space-around 相邻元素距离相同，首位元素与容器边缘的距离是元素之间距离的一半
align-items（侧轴上项目对齐方式）
flex子项们相对于flex容器在垂直方向上的对齐方式
flex-start 元素以容器侧轴起始位置对齐
flex-end 元素以容器侧轴结束位置对齐
center 元素在容器侧轴（元素所在这一列）居中，即垂直居中
baseline 元素向基线对齐
stretch flex子项在侧轴被拉伸到与容器相同高度
重点：根据align-items和justify-content可实现垂直居中
flex-direction（伸缩流方向）
row 显示为行，元素与文字方向一致（从左到右）
row-reverse 元素与文字方向相反（从右到左）
column 显示为列，元素与文字方向一致（从上到下）
column-reverse 元素与文字方向相反（从下到上）
flex-wrap（伸缩换行）
控制子项整体单行显示还是换行显示
nowrap 单行显示，默认值
wrap 多行显示
wrap-reverse 多行显示，从下往上
flex-flow（伸缩流方向的换行）
是flex-direction和flex-wrap的缩写
作用在flex子项
order（伸缩顺序）
改变某一个flex子项的排序位置。
-1 排在最前
0 默认值
1 排在最后
- 红色排在左边第一个
- 让蓝色排在右边第一个
align-self（侧轴上单个项目对齐方式）
控制单独某一个flex子项的垂直对齐方式
flex-start
flex-end
center
baseline
stretch
flex-grow（伸缩-扩展基数）
扩展flex子项所占据的宽度
可设置单个或多个（计算比例和总和）flex-grow
所有剩余空间量总量为1
注意：默认值为0
<1 扩展的空间就总剩余空间和这个比例的计算值
>=1 独享所有剩余空间
flex-shrink（伸缩-收缩比率）
当flex容器空间不足时候，单个元素的收缩比例
可设置单个或多个（计算比例和总和）
注意：默认值为1
<1 收缩尺寸不完全，会有部分溢出
>=1 收缩完全，正好填满容器
图一子项默认值为1，则按1：1：1的比例收缩
flex-basis
定义了在分配剩余空间之前元素的默认大小
auto 默认值
width值
flex
flex属性是flex-grow，flex-shrink和flex-basis的缩写
默认值为0 1 auto
none为0 0 auto
auto为1 1 auto
推荐小游戏
忘记的时候敲一遍就 青蛙回家：flexboxfroggy.com/
