flex弹性布局

1.弹性元素

​ +从元素类型分类

​ - 行内元素 inline

​ - 块级元素 block

​ - 行内块元素 inline-block

​ - 弹性元素 flex（弹性元素不弹自己，弹儿子）

2.约定

​ + 在此我们管写了display：flex 的元素叫做弹性父元素

​ + 写了display：flex 的元素的直系子元素叫做弹性子元素

3.设置了弹性布局以后，浏览器会出现默认的弹性情况

​ + 会生成一条主轴

​ - 主轴方向从左到右

​ + 会生成一条侧轴

​ - 侧轴方向从上到下

​ - 侧轴永远垂直于主轴

​ + 弹性子元素在主轴上回默认从主轴开始方向向结束方向排列

​ + 尺寸问题 ----- 当弹性子元素不设置宽高的时候

​ - 主轴方向尺寸默认为元素内容的尺寸，如果没有内容就为0

​ - 侧轴方向尺寸就是侧轴长度，父元素盒子长度

​ + 弹性元素排列 --------- 永不换行

​ - 当子元素超出父元素的时候，会默认挤压在子元素内容区域

​ - 当挤压到不能在挤压的时候，会直接溢出父盒子

​ + 允许换行以后，会出现多条临时侧轴

​ - 换多少行就有多少个临时侧轴

​ - 多条临时侧轴的长度是一样的

4.书写在弹性父元素身上的样式

1.主轴方向调整

​ + 样式：flex-direction

​ + 取值

​ - 默认：row 主轴从左到右，侧轴从上到下

​ - row-reverse 主轴从右到左，侧轴从上到下

​ - column 主轴从上到下，侧轴从左到右

​ - column-reverse 主轴从下到上，侧轴从左到右

2.元素在主轴上的排列方式

​ + 样式：justify-content

​ + 取值

​ - 默认 flex-start 把所有元素当做一个整体排列在主轴开始的位置

​ - flex-end 把所有元素当做一个整体排列在主轴结束的位置

​ - center 把所有元素当做一个整体排列在主轴居中的位置

​ - space-between 把所有元素空余位置均分放在每两个元素之间

​ - space-around 把所有元素空余位置均分放在每个元素两侧

​ - space-evenly 把所有元素空余位置做绝对均分（安卓不好用）

3.允许换行

​ +样式：flex-warp

​ + 取值

​ - 默认 ：no-warp 不允许换行

​ - warp 允许换行

​ - warp-reverse 允许换行并反转

4.单行侧轴的排列方式

​ + 样式：align-items

​ + 取值

​ - 默认：flex-start 在侧轴开始排列

​ - flex-end 在侧轴结束排列

​ - center 在侧轴居中位置排列

+ 注意：当弹性子元素为多行的时候，这个样式是有效果的

​ - 多行的时候，改属性值是以每个临时侧轴为基准进行位置调整的

5.多行时侧轴的排列方式

​ + 样式：align-content

​ + 取值

​ - 默认：flex-start 把所有元素当做一个整体排列在侧轴开始位置

​ - flex-end 把所有元素当做一个整体排列在侧轴结束位置

​ - center 把所有元素当做一个整体排列在侧轴居中位置

​ - space-between 把所有行空余位置均分放在每两个行之间

​ - space-around 把所有行空余位置均分放在每行两边

​ - space-evenly 把所有航空余位置绝对均分（当弹性子元素微单行的时候，这个元素是没效果的，在安卓不适用）