设置为弹性盒：
display:flex; 块级弹性盒
display:inline-flex; 行级弹性盒 （相当于行级块）flex-direction-作用：描述弹性盒主轴方向（项目的排列方向）
flex-direction: row; 横向【默认从左向右】
flex-direction: row-reverse; （右对齐)，从后往前排，最后一项排在最前面
flex-direction: column 纵向排列;（默认从上向下）
flex-direction: column-reverse; 与column反向<!--
1.设置为弹性盒之后，项目按主轴方向排列（默认从左向右）
2.弹性盒项目本身大小为自动时，默认横向内容撑开，纵向默认拉伸占满容器
-->flex-direction-作用：
justify-content: flex-start; 起始点对齐——默认值。
justify-content: flex-end; 终点对齐——弹性项目向行尾紧挨着填充。
justify-content: center; 居中对齐
justify-content: space-between; 容器的剩余空间在项目之间
justify-content: space-around; 项目两侧拥有相等的剩余空间，项目之间是项目与容器之间的2倍
justify-content: space-evenly; 项目与容器，项目与项目之间拥有相等的空间align-items-设置侧轴方向的对齐方式：
align-items: flex-start; 侧轴起始位置对齐
align-items: flex-end; 侧轴末端位置对齐
align-items: center; 侧轴居中对齐
align-items: baseline; 基线对齐
align-items: stretch; 拉伸占满侧轴——指定项目在侧轴方向的大小为'auto'时有效 默认值flflex-wrap-指定弹性盒子的子元素换行方式：
flex-wrap:
nowrap -不换【默认值】
wrap 换行（起始点在上）
wrap-reverse 与 wrap反向 （起始点在下）align-content-多根轴线的对齐方式：
align-content: stretch; 默认 水平方向
align-content: flex-start; 左对齐
align-content: flex-end; 右对齐
align-content: center; 居中对齐
align-content: space-between; 两端对齐
align-content: space-around; 容器剩余空间在行与行两侧，行与行之间是行与容器之间的两倍
align-content: space-evenly; 行与行之间，行与项目之间容器的剩余空间均等分布弹性盒项目属性：
/* 默认值为0，值越大排列越靠后 */ order:1;
align-self 属性-设置项目自身在侧轴上的对齐方式:
align-self: 单个项目在侧轴上的对齐方式
align-self: 控制所有项目在侧轴上的对齐方式
align-self: auto; 自动——为元素的父元素的'align-items'值，
align-self: flex-start; 起始位置对齐
align-self: flex-end; 终点位置对齐
align-self: center; 居中对齐
align-self: baseline; 基线对齐。
align-self: stretch; 拉伸占满侧轴——侧轴大小为auto时有效flex-简写：
作用：用于指定弹性子元素如何分配空间。
flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性flex-grow-作用增长比率：
默认值0 表示即使容器有剩余空间也不增长
数值，表示份数flex-basis-基准值（参与计算的最终值）：
<!--
没有定义基准值，以当前元素宽度、高度为准
如果定义了基准值，以基准值为准（flex-basis的优先）
计算项目的最终大小
计算剩余空间
计算增长以后的值
计算收缩以后值
-->
<!--
计算剩余空间
400-50-100-100 = 150
1份的大小：150/5 = 30
计算增长以后的大小：
50 + 30 = 80
100 + 30 *2 = 160
--> <!--
剩余空间
400-100-100-100 = 100
100/5=20
-->
<!--
flex-grow:
默认值0 表示即使容器有剩余空间也不增长
数值，表示份数
-->flex-shrink-定义项目的收缩比率：
<!--
flex-shrink:
收缩比率
容器空间不足时，才有效
默认值:1 表示当容器空间不足时收缩
0 表示不收缩
-->
