前言概述：
弹性布局的作用有点儿类似 Android 中 LinearLayout 和 RelativeLayout 两者的合成版，即：支持横向布局，纵向布局，start，end，center 布局，宽高按比例瓜分等等，当然它还有很多其他功能，比如自动换行，按指定 order 排列等。总之有了 Android 基础，理解弹性布局 flex 蛮容易的。
可以这么的理解，传统的网页布局方式是通过 display 和 position 以及 float 三者完成的，借助块级元素，行内元素特性，结合 position 指定的相对布局、绝对布局、固定布局方式来实现各种排版效果。如果需要浮动，则借助 float。
但这种传统的方式，一来使用较复杂，二来某些排版效果不好实现，如列表、居中、响应式布局等效果。
而 flex 则能够很好的完成传统的布局工作，而且，它还可以支持响应式布局。
1.基础概念
轴线：
当使用 flex 布局时，首先想到的是两根轴线：主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。
理解主轴和交叉轴的概念对于对齐 flexbox 里面的元素是很重要的；因为 flexbox 的特性是沿着主轴或者交叉轴对齐之中的元素。
布局空白：
available space，大概来说，flex 容器大小扣掉 items 的 flex-basis 指定的占据的空间大小之外剩余的区域，flex-basis 通常是指 item 本身的大小，当然也可以手动设置。
flex 的一些属性就是通过改变 flex 容器中的布局空白分配来达到对齐等效果的。
比如 items 的 flex-grow 拉伸或者 flex 容器的 justify-content 主轴对齐等，其实就是将这些布局空白按照不同算法分配给各个 item，分给 item 时，是要直接填充进 item 的内容里达到拉伸效果，还是就简单的将空白围绕在 item 周围达到类似 margin 效果来实现 item 的居中、靠左、靠右、均分等对齐方式。
具体属性不了解没关系，下面的章节会讲，知道概念即可。
2.flex相关属性
对任意块级元素标签设置 display: flex 即可让这个元素作为 flex 容器存在，也就可以使用 flex 的相关属性了。
flex 的属性并不多，目前只有 13 个，其中有 7 个是 flex 弹性盒子容器本身所使用的属性，6 个是 flex-item 弹性盒子的子项使用的属性。其中，有些属性只是将其他属性的集中简化使用，因此，真正具有布局用途的属性并不多，很好掌握。
作用于 flex 弹性盒子容器身上的属性：
flex-direction
语法格式：
flex-direction: row(default) | row-reverse | column | column-reverse
用于设置主轴的方向，flex 分主轴和交叉轴两个概念，items 布局时，默认延主轴方向进行，因此通过设置主轴是水平方向还是垂直方向就可以实现 items 的水平或垂直布局。
- row：默认值，设置主轴为水平方向
- column：设置主轴为垂直方向
其他属性就不介绍了，因为主轴方向就两个，要么水平，要么垂直，其他的区别仅在于水平时是从左到右，还是从右到左，所以这个属性的影响因素之一的 LTR 和 RTL，但没必要考虑这么多，这些场景应该不多，知道这个是用来设置主轴方向就够了，我觉得。
示例：
