以下是弹性布局的一些知识点，很简单，易懂！
语法：属性：display
取值：
- flex：当前元素充当弹性布局的容器，并且本身以块级元素显示。
- inline-flex：当前元素充当弹性布局的容器，并且本身以行内元素显示。
概念：
- 容器：容纳弹性布局中子元素的父元素。
- 项目：容器中的子元素
注意：元素一旦变为弹性布局的元素后，float，clear，vertical-align，text-align都失效，定位属性是有效的！
接下来就是弹性布局的核心：弹性布局的属性。弹性布局的属性分为容器的属性和项目的属性。
容器的属性：
- flex-direction：定义容器的主轴方向
- row 默认，主轴水平，从左到右
- row-reverse主轴水平，从右到左
- column主轴垂直，从上到下
- column-reverse主轴垂直，从下到上
- flex-wrap：如果项目在容器中一行显示不下的方式
- norwap：默认不换行，项目自压缩
- wrap：换行
- wrap-reverse：项目在交叉轴上的换行
- flex-flow：以上两个属性的简写，取值有两个
- justify-content：项目在主轴方向上的对其方式
- flex-start：在轴的起点对齐
- flex-end：末尾段对齐
- center：居中对齐
- space-between：项目与项目之间的距离相等
- space-around：项目两侧的剩余空间相等
- align-items：项目交叉轴的对齐方式
- flex-start：在轴的起点对齐
- flex-end：末尾段对齐
- center：居中对齐
- baseline：基线对齐
- stretch：如何项目未设置高度，将占满整个容器
- align-content：如果有多跟轴线（需要换行），轴线的对齐方式
- flex-start：在轴的起点对齐
- flex-end：末尾段对齐
- center：居中对齐
- space-between：项目与项目之间的距离相等
- space-around：项目两侧的剩余空间相等
- stretch：占满整个轴线
项目的属性：
- order：顺序，取值为整数，默认所有项目取值为0，取值越小越往前。
- flex-grow：如果容器有剩余空间，定义项目的放大比例，将剩余空间分配给具有此属性的元素，按比例分配。
- flex-shrink：如果容器有空间不足，定义项目的缩小比例。默认为1，取值为0，不压缩。
- flex-basis：定义在主轴上的大小，可以覆盖width/height，默认为auto。
- flex：以上3个属性的综合
- align-self：设置当前这个项目的对齐方式，可以覆盖align-items
- flex-start：在轴的起点对齐
- flex-end：末尾段对齐
- center：居中对齐
- baseline：基线对齐
- stretch：如何项目未设置高度，将占满整个容器