弹性盒子：
老：display：box；
新：display：flex；
方向：flex-direction：
横向正方向 row/横向反方向 row-reverse/纵向正方向 column/纵向反方向 column-reverse；
横向对齐方式:justify-content
左对齐：flex-start / 右对齐：flex-end / 居中对齐：center
两端对齐：space-between / 等间距对齐：space-around
纵向对齐方式：align-items
上对齐：flex-start / 下对齐：flex-end / 居中对齐：center
等高（跟父级的高度一样）：stretch / 基线对齐（按照它的下边对齐）：baseline
(注意：写align-items不能写align-content)
纵向子元素对齐方式(行数>1)：align-content
上对齐：flex-start / 下对齐：flex-end / 居中对齐：center
两端对齐：space-between / 等间距对齐：space-around
子元素是否换行：flex-wrap
换行：wrap / 不换行：nowrap
方向跟换行的缩写：
flex-flow: 方向（flex-direction） / 换行（flex-wrap）
子元素上的三个属性：
扩展空间： flex-grow（总共写了多少，然后对剩余空间进行划分）
压缩空间：flex-shrink
1份宽度 = (子元素总宽-容器宽)/总份数（每个元素占一份，flex-shrink：3 + 2）
压缩后的空间 = 子元素宽 - 1份宽度 * 份数
宽度：flex-basis （优先级高于width，会覆盖width的样式）
缩写：
flex: flex-grow 扩展空间 flex-shrink 压缩空间 flex-basis 宽度 (注意，必须按照顺序来)
顺序：order
值越小越靠前，越大越靠后
单独样式：align-self
