弹性布局(flex)
弹性布局，全称弹性盒子布局(flexible box layout)，是一种新的灵活布局形式，能使开发者轻松的设计出复杂的页面设计。
基本概念：
上图来自草案截图
main axis：弹性容器(flex container)主轴，弹性子元素(flex item)将沿主轴布局,由flex-direction属性控制，默认水平方向。 main start - main end: 表示主轴的起始端和末端，flex item沿着主轴从main start 排布至 main end; main size: 就是指弹性容器或弹性子元素的宽度或者高度。以主轴为准。所以它的‘main size ’属性就是主轴方向上的宽度或高度属性 cross axis: 交叉轴，与主轴垂直 cross start - corss end: 表示交叉轴的开始和结束，flex item 沿着交叉轴从cross start 排布至 cross end cross size :表示弹性容器或弹性子元素的宽度或高度，以交叉轴为准。
创建一个弹性盒子：
使用display:flex;
属性
flex-direction:设置主轴的方向
取值：
- row :水平方向，默认值，在ltr(left to right)排布中是从左到右，在rtl(right to left)的排布中从右到左
可以通过html元素的[dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)全局属性更改一个枚举属性，指示元素文本的方向性。它可以具有以下值：
- ltr，意思是从左到右，用于从_左到右_书写的语言（如英语）;
- rtl，意思是从右到左，用于从_右到左_书写的语言（如阿拉伯语）;
- auto，让用户代理决定。它使用基本算法来解析元素中的字符，直到找到具有强方向性的字符，然后将该方向性应用于整个元素。
- row-reverse 同样是水平方向，不过置换了 main start 和main end 的位置
- column 垂直方向 从上到下排布
- column-reverse 垂直方向 从下到上排布
例子：
flex-direction:row; 默认
flex-direction: row-reverse; 与row 相比排布方向相反
flex-direction: column; 垂直方向 从上到下排布
flex-direction: column-reverse;垂直方向 从下到上排布
flex-wrap 换行
用于决定子项是否换行，以及换行方向
取值：
- nowrap 不换行 默认值。可能会导致容器溢出
- wrap 换行 沿交叉轴正向排布(要以主轴的方向为准则)
- wrap-reverse 换行同wrap 一致， 不过cross start 和 cross end 位置置换
flex-wrap:nowrap;
flex-wrap:wrap;
flex-wrap: wrap-reverse;
flex-flow
是flex-direction 和 flex-wrap两个属性的简写
语法：
justify-content
控制弹性容器（flex container）内主轴（main axis）上的子元素（flex items）如何对齐分布。
取值：
- flex-start: 在主轴方向从main start 开始排布，子元素之间紧密排列
- flex-end: 在主轴方向从main end 开始排布，子元素之间紧密排列
- center：在主轴方向居中排布
- space-between：在主轴上平均分布，第一个子项从main start开始，最后一个子项在main end结束。其他子项平均分布。(如果剩余空间为负数或者容器只有一个子元素，此时与flex-start表现相同)
- space-around：在主轴方向均匀分布，相邻子项间的距离相等，首尾的距离是相邻子项之间距离的一半
- space-evenly 在主轴方向上均匀分布，与space-around不同的在于它的首尾的距离和相邻子项之间的距离一样
- stretch 如果所有子项在主轴方向的总尺寸小于弹性容器的尺寸，任何尺寸设置为auto的元素都会等比例的增加其尺寸，同时仍然遵守由max-height/max-width施加的约束，以便沿主轴完全填充容器尺寸
语法：
示例：
align-items
在弹性布局中，它用来控制子元素在交叉轴(cross axis)上的对齐方式
取值：
- flex-start: 子元素放在交叉轴起始点(cross start)
- flex-end:子元素放在交叉轴末端(cross end)
- center: 子元素在交叉轴的中居中放置
- baseline: 所有参与对齐的 子元素将按照基线进行排列，确保它们各自的基线相互对齐。同时，这些项目中基线到其交叉起点外边距边缘距离最大的那一个，其交叉起点外边距边缘将与该行或列的交叉起点边缘完全对齐。
如果某个子元素在主轴（必要轴）方向上没有明确的基线，那么浏览器会根 据项目内容合成一个虚拟的基线来进行对齐计算
- stretch:子元素的cross size 属性为auto,却交叉轴方向的margin都不是auto.拉伸填充容器.但仍遵守（min-width/min-height/max-width/max-height）约束
语法：
示例：
align-content
如果flex-wrap属性不为no-wrap,那么align-content 属性就可以控制换行之后子元素在交叉轴上的的对齐分布。和justify-content属性类似
语法：
示例：
flex-start：
space-around
gap
用来设置行与列之间的间距；是row-gap和column-gap的简写 取值：
<length>
数值单位
<percentage>
百分比 相对于容器的百分比
示例
以上的几个属性都是在弹性容器上的属性，下面讲在子元素上的属性
flex
用于控制子元素的尺寸增大或缩小以便自适应容器的可用空间； flex属性则是下面三个属性的缩写:
用于设定元素的大小基准值，可以设置为任意的width值，包括px,em,%,初始值为auto(和width或height的处理方式不同), 还可以使用关键之content,表示根据元素的内容自动调整大小。 当值为auto时，使用主轴方向main size 作为其值，如果main size 的值也为auto,那么flex-basis的值设置为content
flex-grow 为flex增长因子。 在每个子元素的flex-basis的值计算出后，它们的和在加上外边距就会占据主容器的一定宽度，也可能存在剩余空间，而flex-grow的值将决定在子元素能得到剩余空间的多少。 如果为0,则表示不参与分配剩余空间，它的值不会超过flex-basis的值 默认值为1， flex-grow 的值越大，元素的“权重”越高，也就会占据更大的剩余宽度。一个 flex-grow:2 的子元素增长的宽度为 flex-grow: 1 的子元素的两倍。
若设置的值一致，那么所有子元素将等比例分配剩余空间
可以设置为大于等于0的数字，负值无效
flex-shrink表示为flex 收缩系数，决定了当flex容器空间不足时，子元素是否收缩，收缩多少。 当值为0时，表示不收缩 默认值为1 设置的值越大，收缩的越多。
可以设置为大于等于0的数字，负值无效
flex语法：
-
**单值语法：**值必须时以下之一：
-
一个
<flex-grow>的有效值，此时简写会扩展为, flex:<flex-grow>1 0; -
一个
<flex-basis>的有效值，此时简写扩展为： flex:1 1<flex-basis> - 关键字或者全局关键字之一none
-
一个
-
双值语法：
- 第一个值必须是flex-grow的有效值
-
第二个值必须是以下值之一：
-
flex-shrink 的有效值，则扩展为: flex:
<flex-grow><flex-shrink>0; -
flex-basis 的有效值，则扩展为： flex:
<flex-grow>1<flex-basis>
-
flex-shrink 的有效值，则扩展为: flex:
-
三值语法：值必须按以下顺序排列：
1. flex-grow的有效值 2. flex-shrink的有效值 3. flex-basis的有效值 当在flex 缩写中
<flex-basis>设置为0时，表示将<flex-basis>忽略。
取值：
- auto ：相当于 flex:1 1 auto;
- none: 相当于 flex:0 0 auto;
- initial:相当于 flex:0 1 auto;
-
0~正无穷的数：相当于：flex:
<number>1 0;
示例，左右两个容器，一个width固定，另一个占用剩余的全部空间，在实际的项目布局中很常用。
align-self
控制单个子元素在交叉轴上的对齐方式
取值和align-items一致
- auto 默认值
- flex-start
- flex-end
- center
- baseline
- stretch
效果图示
示例：
order
默认情况下，flex子元素的排列顺序和他们在源码中的顺序一致，但order属性可用于在更改子元素在布局中出现的顺序，可以指定为任意整数(默认为0)，如果多个元素的值相同,则按照源码中的顺序出现。值越小越靠前
示例：