CSS：Flex布局(flex布局菜鸟教程)
1. 主轴和交叉轴
2. flex容器和flex子项（相关属性）
2.1 flex容器（加给容器的属性）
2.1.1 flex-direction
用来设置主轴的方向。属性值：
row（默认值）：水平方向（从左到右）row-reverse：水平方向（从右到左）column：竖直方向（从上到下）column-reverse：竖直方向（从下到上）
2.1.2 flex-wrap
属性规定flex容器是单行或者多行。
换行的时候，会根据父容器的宽高决定其位置。n行平均分配，每块占1/n。
nowrap（默认值）：规定项目不拆行或者不拆列，但会自动调节容器内元素的宽度或高度。wrap：必要的时候拆行或者拆列wrap-reverse：必要的时候拆行或者拆列，以相反的顺序initial：该属性为它的默认值inherit：从父元素继承该属性。
2.1.3 flex-flow
是 flex-direction 和 flex-wrap 属性的复合属性。用于设置或检索弹性盒模型对象的子元素排列方式。
row nowrap：默认值
2.1.4 justify-content
用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
用于设置对齐方式：
flex-start：默认值。从行首（主轴的起点，容器的开头）起始位置开始排列flex-end：从行尾（主轴的终点，容器的结尾）位置开始排列center：居中排列
用于分配弹性元素：
space-between：均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。space-around：均匀排列每个元素，每个元素周围分配相同的空间。space-evenly：均匀排列每个元素，每个元素之间的间隔相同。
2.1.5 align-items
定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
stretch：默认值，元素被拉伸以适应容器center：元素位于容器的中心flex-start：元素位于容器的开头flex-end：元素位于容器的结尾。
2.1.6 align-content
在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项。
不折行的情况下，该属性不生效。该属性是针对多行的一个情况。(就是要设置flex-wrap属性不为nowrap)
stretch：默认值，元素被拉伸以适应容器。center：元素位于容器的中心。flex-start：元素位于容器的开头。flex-end：元素位于容器的结尾。space-between：元素位于各行之间留有空白的容器内。
2.2 flex子项（加给容器里的子项的）
2.2.1 order
设置或检索弹性盒模型对象的子元素出现的順序。默认是0。
2.2.2 flex-grow
用于设置或检索弹性盒子的扩展比率。默认是0，表示不占用剩余的空白间隙扩展自己的宽度。范围：0-1。值为1：占用剩余所有空间。
2.2.3 flex-shrink
指定了 flex 元素的收缩比率。但是只有当子元素默认宽度之和大于容器的时候才会发生收缩。 默认为1，自动收缩，跟容器大小相同。设为0，则不收缩。按比例收缩溢出的部分。
2.2.4 flex-basis
2.2.5 flex
2.2.6 align-self
作者：Elaine
链接：https://juejin.cn/post/7034031559149781022