flex 布局的基本概念
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力
* 内容 : 弹性盒模型包括主轴 侧轴
* 伸缩容器的属性
* display伸缩容器:
flex 块级
inline-flex 内联
* flex-direction 主轴方向:
row 默认，从左到右
row-reverse 从右向左
column 从上到下
column-reverse 从下到上
* flex-wrap 伸缩容器是单行还是多行 并控制侧轴的方向，侧轴的方向决定堆放的方向
nowrap(默认值) | wrap(多行显示) | wrap-reverse(多行显示-反方向 从下往上排列)
* justify-content 伸缩项目在主轴上的对齐方式:
flex-start 默认，向伸缩容器的起始位置对齐
flex-end 向伸缩容器的的终点位置对齐
centent 向伸缩容器的中间位置对齐
space-between 伸缩项目平均分布 第一个伸缩项目在伸缩容器中最开始位置 最后一个伸缩项目在伸缩容器中的终点位置
space-around 伸缩项目平均分布在伸缩容器里 两端保留一半的空间
* align-content 伸缩项目在侧轴上的对齐方式(多行模式)
flex-start 向伸缩容器的起始位置对齐
flex-end 向伸缩容器的结束位置对齐
center 向伸缩容器的中间位置对齐
space-between 在伸缩容器里平均分布
space-around 在伸缩容器里平均分布 两边各有一半空间
stretch 各行将会伸展占用剩余空间 会受max-... min-... 影响
* align-items 伸缩项目在侧轴上的对齐方式(对单行对齐进行控制)
flex-start 侧轴的起始位置
flex-end 侧轴的结束位置
center 侧轴中心位置
baseline 基线对齐
stretch 默认，如果没设置高度 伸缩项目默认填充整个容器 如果有max-height max-width等属性 会受到影响
* flex-grow 伸缩项目占用多少剩余空间(如果给一个元素设置了width又设置了flex-grow 剩余空间=总宽度-width)
number 占用空间比例 注:[给每个元素一个宽度 会让所有元素忽略内容长短带来的宽度影响 如果不给宽度 每 个元素的宽是等于去掉内容以后的宽度]
伸缩项目上的属性
* order 伸缩项目在文档流中出现的位置
* align-self 伸缩项目在侧轴上的对齐方式
flex-start 侧轴的起始位置
flex-end 侧轴的结束位置
center 侧轴的中心位置
baseline 基线对齐
实际值 = 计划值 - 总差值 * flex-shrink/(flex-shrink和)
总结一下：
- flex-direction调整主轴方向（默认为水平方向）
- justify-content调整主轴对齐
- align-items调整侧轴对齐（子元素可以使用align-self覆盖）
- flex-wrap控制是否换行
- align-content堆栈（由flex-wrap产生的独立行）对齐
- flex-flow是flex-direction + flex-wrap的简写形式
- flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
- order控制子项目的排列顺序，正序方式排序，从小到大
