一、Flex组成
创建flex容器：display:flex
主轴对齐方式：justity-content
侧轴对齐方式：align-items
弹性盒子换行：flex-wrap
某个盒子侧轴对齐方式：align-self
修改主轴方向：flex-direction
弹性伸缩比：flex
行对齐方式：align-content
二、主轴对齐方式
justity-content
1.flex-start：默认值，弹性盒子从起点开始依次排列
2.flex-end：弹性盒子从终点开始依次排列
3.center：弹性盒子沿主轴居中排列
4.space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
5.space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
6.space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
三、侧轴对齐方式
align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
1.stretch：弹性盒子沿着侧轴线被拉伸至铺面容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
2.center：弹性盒子沿侧轴居中排列
3.flex-start：弹性盒子从起点开始依次排列
4.flex-end：弹性盒子从终点开始依次排列
四、弹性盒子换行
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示
flex-wrap
1.wrap：换行
2.nowrap：不换行（默认）
五、行对齐方式
align-content
1.flex-start：默认值，弹性盒子从起点开始依次排列
2.flex-end：弹性盒子从终点开始依次排列
3.center：弹性盒子沿主轴居中排列
4.space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
5.space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
6.space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
六、修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向
flex-direction
1.row：水平方向，从左向右（默认）
2.column：垂直方向，从上向下
3.row-reverse：水平方向，从右向左
4.column-reverse：垂直方向，从下向上
七、弹性伸缩比
控制弹性盒子的主轴方向的尺寸
flex
整数数字，表示占用父级剩余尺寸的份数
注
@黑
