flex布局详解
- 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性
容器的属性
- flex-direction 决定主轴的方向
- flex-wrap 如何换行
- flex-flow 简写形式，默认值为row nowrap
- justify-content 定义了项目在主轴上的对齐方式
- align-items 定义项目在交叉轴上如何对齐
- align-content 定义了多根轴线的对齐方式
项目的属性
- order 定义项目的排列顺序。越小越靠前
- flex-grow 定义项目的放大比例，默认为0
- flex-shrink 定义了项目的缩小比例，默认为1
- flex-basis 定义了在分配多余空间之前，项目占据的主轴空
- flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
- align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto
