1、伸缩容器
display: inline-flex
无文本内容：一行中文字的基线是容器的基线
有文本内容：容器和一行中文字的基线对齐（第一个文本盒子）
display: flex
主轴对齐（justify-content）
flex-start
center
flex-end
space-around - 空间环绕项目
space-between - 项目包裹空间
侧轴对齐 （align-items）
伸缩项目所在行的侧轴对齐
flex-start
center
flex-end
stretch (拉伸：默认值)
baseline 找一行中最大的基线对齐
侧轴对齐 （align-content）
生效前提：设置 flex-wrap: wrap / wrap-reverse , 设置伸缩项目宽度，导致产生多行。
让伸缩项目统一在 侧轴 对齐。
flex-start
center
flex-end
space-around - 空间环绕项目
space-between - 项目包裹空间
包裹伸缩项目（flex-wrap）
nowrap
默认值：包裹 --- 主轴空间不足压缩伸缩项目
wrap
主轴空间不足，换行显示。
wrap-reverse
改变了侧轴的 start 和 end 位置
改变主轴，侧轴方向(flex-direction)
row
默认
row-reverse
主轴的 start 和 end 对调
column
主轴和侧轴对调
column-reverse
主轴和侧轴对调， 主轴的 start 和 end 对调
伸缩项目
侧轴对齐（align-self）
flex-start
center
flex-end
stretch (拉伸：默认值)
baseline 找一行中最大的基线对齐
分配主轴的剩余空间（flex-grow）
number
主轴方向初始化的长度（大小） （flex-basis）
当主轴方向与宽度一致，会覆盖宽度样式。
压缩率(flex-shrink)
number
默认值： 1
压缩率计算：必须包含flex-basis 和 flex-shrink
沿着主轴排序 (order)
number
多媒体选择器（@media）