弹性有关的
弹性布局：

1. display:flex父元素，容器中设置；
2. flex-basis;弹性标签的基础值 因为主轴方向不定(设置宽高比较麻烦 直接用basis)
3. flex-direction;排列方向，row row-reverse column column-reverse 
4. flex-grow;成长 空间分配
5. flex-wrap;换行，多行1,nowrap;2,wrap,3,wrap-reverse,镜像与2.
6. flex-shrink；缩放 默认为0；值越大缩放效果越明显  

* row（默认值）：主轴为水平方向，起点在左端。从坐到右布局
* row-reverse：主轴为水平方向，起点在右端。从右到左
* column：主轴为垂直方向，起点在上边，从上到下布局。
* column-reverse,主轴为垂直方向，起点在下边，从下到上布局。

1.  弹性空间分布

grow：成长 把什么变得。。。默认值为0；
flex-grow,会把容器中剩余的空间按比例分配给每一项 所有flex-grow的数目的和 按比列 分配给比如section有 四个
每个 加flex-grow 1312 就是把剩余的空白分成七份 再按比列 1 3 1 2分给每一个section

justify-content属性（作用调整位置）主轴对齐方式（主轴指当前的排列方向row 左到右row-reverse 右到左 column 上到下 column-reverse 下到上 ）

justify-content: flex-start | flex-end | center | space-between | space-around;}
stretch 延展，如果未设高度，会造高度方向。

* flex-start（默认值）：左对齐  跟left不等（限制为主轴方向）
* flex-end：结束位置对齐，跑右边。
* center： 居中
* space-between：两端对齐，留白均分给每一项，除了两端的。
* space-around：每一项两侧的间隔相等。每一项散开 间距均分。

align-items属性与主轴垂直的方向（ 交叉轴）

align-items: flex-start | flex-end | center | baseline | stretch;}

* flex-start：交叉轴的起点对齐。
* flex-end：交叉轴的终点对齐。
* center：交叉轴的中点对齐。
* baseline: 项目的第一行文字的基线对齐。英语四线格中第三根线；当标签前后没有文字是没有作用
* stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-self（自己的对齐方式 只能指竖直方向）属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch 除了auto 其他都与align-items属性完全一致。

align-self: auto | flex-start | flex-end | center | baseline | stretch;}

1. 换行多行 flex-wrap；换行 wrap 紧跟窗口的大小，窗口小了 一行放不下才换行

align-content属性（行间对齐 可以多行）

align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

* flex-start：与交叉轴的起点对齐。
* flex-end：与交叉轴的终点对齐。
* center：与交叉轴的中点对齐。
* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
* space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
* stretch（默认值）：轴线占满整个交叉轴。

1.  缩放程度flex-shrink

shrink缩放；默认为0 值越大 缩放空间越大。flex-shrink:为了调整自己想要的每个人快的大小；；

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order: <integer>;}

1. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
2. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
3. flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。