传统布局：
- 兼容性好
- 布局繁琐
- 局限性，不能再移动端很好的布局
flex弹性布局：
- 操作方便，布局极为简单，移动端应用广泛
- PC端浏览器支持情况较差
布局原理
flex意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
即通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
- 当我们为父盒子设置flex布局后，子元素的float、clear和vertical-align属性都将失效。
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
常见的父项属性
flex-direction：设置主轴的方向（主轴和侧轴是会变化的，就看该属性设置谁为主轴，剩下的就是侧轴。而子元素的跟着主轴来排列的）
| 值 | 说明 |
|---|---|
row |
默认值。从左到右 |
row-reverse |
从右到左 |
column |
从上到下 |
column-reverse |
从下到上 |
justify-content：设置主轴上的子元素排列方式（使用前必须确定好主轴是哪个）
| 值 | 说明 |
|---|---|
flex-start |
默认值。从头部开始，如果x轴是主轴，则从左到右 |
flex-end |
从尾部开始排列 |
center |
在主轴居中对齐（如果x轴是主轴则水平居中） |
space-around |
平分剩余空间 |
space-between |
先两边贴边，再平分剩余空间 |
flex-wrap：设置子元素是否换行（flex布局中，默认情况下子元素都排列在一条线上，且默认是不换行的，如果装不下，则会缩小子元素的宽度，放到父元素里面）
| 值 | 说明 |
|---|---|
nowrap |
默认值。不换行 |
wrap |
换行 |
align-content：设置侧轴上的子元素的排列方式，只能用于子项出现换行的情况（多行）
| 值 | 说明 |
|---|---|
flex-start |
默认值。从上到下 |
flex-end |
从下到上 |
center |
在侧轴中间显示 |
space-around |
子项在侧轴平分剩余空间 |
space-between |
子项在侧轴先分布在两头，再平分剩余空间 |
stretch |
设置子元素高度平分父元素高度 |
align-items：设置侧轴上的子元素排列方式，在子项为单项的时候使用（单行）
| 值 | 说明 |
|---|---|
flex-start |
从上到下 |
flex-end |
从下到上 |
center |
挤在一起居中（垂直居中） |
stretch |
（默认值）拉伸，子元素不要给高度（会使所有的子元素沿着侧轴的方向拉伸以填充容器） |
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap。
常见的子项属性
flex：定义子项目分配剩余空间，用flex来表示占多数份数。
align-self：控制子项自己在侧轴上的排列方式。（运行单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch）
order：定义项目的排列顺序。（数值越小，排列越靠前，默认为0.）