面试官：介绍下Flex布局？
额...嗯..这个Flex我用的不多（小声bb）。我只知道Flex：1是用来填充剩余空间的？然后就只知道
dispaly:flex、justify-content、align-items这几个属性？
这可不行啊。Flex布局不掌握，面试岂不是被面试官拿捏了。
话不多说，开背开背。
建议:
概念 -> 轴线 -> 属性这个顺序回答。
Flex布局，就是弹性布局，是非常成熟的布局，经常用于两栏布局、居中，移动端小程序这些场景中。 通过display：flex来指定元素为弹性容器，容器内所有元素都脱离标准文档流。
Flex布局有水平轴和交叉轴，主轴默认是水平方向，通过flex-direction来决定主轴方向，flex-direction:row 或者row-revese 就是表明主轴是水平方向，交叉轴就是竖直方向。flex-direction:column 或者column-reverse，主轴就是竖直方向，交叉轴就是水平方向。
Flex布局的属性分 容器属性 和 容器成员属性。
容器属性有：
- flex-direction：设置主轴方向；
- justify-content：设置容器成员在主轴方向上的如何对齐，常见就是居中、左对齐、间隔相等这些场景。
- align-items：设置容器成员在交叉轴上如何对齐，常见就是设置顶对齐、底部对齐，居中、第一行文字基线对齐。
还有就是flex-wrap、flex-flow、align-content这些属性，flex-wrap是用来设置换行，flex-flow是用来设置主轴方向 和 换行属性的。 align-content是用来设置轴线方向的。
容器成员属性主要是：
flex-grow、flex-shrink、flex-basis、flex。
flex-grow是用来指定有剩余空间时成员是否放大，flex-shrink就是来用定义成员空间不足时如何缩小。flex-basis是用来设置主轴的尺寸，就是主轴方向上能排列多少长度的空间。
flex常见就是Flex:1,是一下子设置grow、shrink、basis这三个属性，flex：1就是1 1 0，能自适应剩余空间。
还有两个属性 order、align-self，前者是用来设置成员的排列前后顺序，数值越小，排列越靠前。align-self是用来覆盖align-items属性，来用允许某个交叉轴上的排列方式与其他部分不相同。
