-
开启弹性盒子模型
语法：
dispaly:flex
容器默认以程度轴为主轴，子元素从左往右排列，纵向轴为侧轴-
开启弹性盒子模型后对子元素的影响
- 所有子元素默认依照主轴从左往右排列
- 所有子元素在主轴上没有长度（主轴为程度方向时，没有宽度；主轴为垂直方向时，没有高度）
- 所有子元素默认在侧轴上填满长度（侧轴为程度方向时，子元素宽度填满侧轴；侧轴为垂方向时，子元素高度填满侧轴）
- 所有子元素在主轴上从主轴开始地位向完结地位重叠
- 所有子元素在侧轴上从侧轴开始地位开始重叠
- 所有子元素默认永不换行，增加元素主动进行平均挤压，直到子元素内容无奈持续挤压，间接溢出盒子
- 设置为弹性盒模型后，所有子元素都将主动成为容器成员，并且 float、clear、vertical-aligin 款式都会生效
-
-
弹性盒子模型作用域父元素上的款式
-
设置主轴和子元素排列方向：
flex-direction- 以程度轴为主轴，从左往右排列：
row - 以程度轴为主轴，从右往左排列：
row-reverse - 以纵向轴为主轴，从上往下排列：
column - 以纵向轴为主轴，从左往右排列：
row-reverse
- 以程度轴为主轴，从左往右排列：
-
设置主轴方向子元素的排列形式（不扭转元素程序)：
justity-content- 主轴起始地位对齐：
flex-start - 主轴两头地位对齐：
center - 主轴完结地位对齐：
flex-end - 所有空白填充在两个元素两头（左右两个元素顶格）：
space-between - 所有空白盘绕每个子元素两侧填充：
space-around - 空白均分填充在子元素之间（IOS 反对，安卓不反对）：
space-evenly
- 主轴起始地位对齐：
-
子元素在侧轴上的排列形式（没有换行的时候只有一行显示）：
align-items- 侧轴起始地位排列：
flex-start - 侧轴两头地位排列：
center - 侧轴完结地位排列：
flex-end
- 侧轴起始地位排列：
-
设置是否换行：
flex-wrap- 不换行：
nowrap - 换行：
wrap - 逆置换行：
wrap-reverse
- 不换行：
flex-direction与flex-wrap复合语法：flex-flow: 排列方向 换行形式-
设置侧轴的排列形式（设置时须要开启换行，在多行时，每一行都是一个 整体，以一行为一个单位进行设置）：
align-content- 子元素在侧轴起始地位对齐：
flex-start - 子元素在侧轴两头地位对齐：
center - 子元素在侧轴完结地位对齐：
flex-end - 所有空白填充在两个元素两头（高低两个元素顶格）：
space-between - 所有空白盘绕每个子元素两侧填充：
space-around - 空白均分填充在子元素之间（IOS 反对，安卓不反对）：
space-evenly
- 子元素在侧轴起始地位对齐：
-
-
作用在子元素上的款式
-
指定子元素对齐形式：
align-self- 继承父元素的 align-items 的对齐形式：auto
- 侧轴起始地位对齐：
flex-start - 侧轴两头地位对齐：
center - 侧轴完结地位对齐：
flex-end
-
设置弹性宽度（以后元素占据除固定宽的元素后残余局部的比例）：
flex- 设置后内容会被挤压
- 优先挤压设置弹性宽度的元素
- 弹性宽度元素宽度挤压到极限在挤压固定宽度的宽
- 直到所有不能被挤压，间接溢出
- 子元素排列程序（数字越小，排在越后面）：
order - 子元素的放大比例（默认为 0）：
flex-grow - 子元素的放大比例（默认为 1）：
flex-shrink - 调配空余空间之前子元素的默认大小：
flex-basis flex-grow、flex-shrink、flex-basis复合写法
语法 (默认值)：flex:0 1l, auto
值间接写auto示意flex:1 1 auto
值间接写none示意flex:0 0 auto
-