弹性盒模型：display:flex
1. 父级：设置主轴方向（水平|垂直），设置主轴上排列反序 ：flex-direction
- 水平：row (起点在左端)
- 垂直：column (起点在上沿)
- 水平且反向：row-reverse (起点在右端)
- 垂直且反向：column-reverse (起点在下沿)
2. 父级：子元素是否换行：flex-wrap
- 不换行：nowrap
- 换行，第一行在上方：wrap
- 换行，第一行在下方：wrap-reverse
3. 父级：主轴上元素对齐方式，也是主轴富余空间管理：justify-content
- flex-start
- flex-end
- center
- space-between
- space-around
4. 父级：侧轴上元素对齐方式，侧轴富余空间管理：align-items
- flex-start
- flex-end
- center
- baseline
- stretch：如果项目未设置高度或设为 auto，将占满整个容器的高度。
5. 父级：多根侧轴上元素对齐方式：align-content
- flex-start：子元素集中在顶部
- flex-end：子元素集中在底部
- center：子元素集中在中间
- space-between：
- space-around：
- stretch（默认值）：轴线占满整个交叉轴。
6. 子元素：具体位置设置（排序）
- order:number; 数值越小越靠前，可以接受 0 或者负值
7.1 子元素：元素弹性空间（放大比例）
- flex-grow: 1;（默认为 0，即如果存在剩余空间，也不放大）
7.2 子元素：元素弹性空间（缩小比例）
- flex-shrink: 1;(默认为 1，即如果空间不足，该项目将缩小。)
7.3 子元素：元素弹性空间（初始化比例）
- flex-basis:auto; 就是它自身的宽度（或高）
- 作用：就是计算比例（他么的废话么）
- 看下面例子
child的 flex-basis:400px，other的为 200px- 那
child就是other的二倍了，对吧 - 那
child的宽度永远是other的2倍 - 所以说，它就是设置盒模型里元素占比的基准值
效果演示：wmh1106.github.io/bd-front-en…
7.4 简写：flex
- flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。
8. 子元素：单独设置侧轴对齐方式：align-self
- auto
- flex-start
- flex-end
- center
- baseline
- stretch
