Flex布局这几点你搞清楚了吗？
1. 样式中要想合理的使用Flex布局，首先要搞明白每个参数的含义：
-
flex-direction: row |row-reverse | column | column-reverse;
用于指定Flex主轴的方向，根据页面结构进行参数选择，进而决定Flex子项在Flex容器中的位置
- row： 默认值，以水平方向上的轴线为主轴方向，将Flex子项水平方向从左至右依次排列
- row-reverse： 主轴方向轴线不发生改变，但子项排列顺序将会被reverse（反转）
- column： 以垂直方向上的轴线为主轴方向，将Flex子项垂直方向从上至下依次排列
- column-reverse： 同理
-
flex-wrap: no-wrap | wrap | wrap-reverse;
wrap（换行） 指定Flex子项是否换行，在这里应当考虑子项是否会溢出容器
-
flex-flow: flex-direction | flex-wrap;
集合flex-direction和flex-wrap两个属性
-
justify-content: flex-start | flex-end | center | space-between | space-around;
用于指定Flex子项在主轴方向上的对齐方式 【justify：使每行排齐|content：主要内容】
- flex-start： 默认值，将Flex子项与行的起始位置对齐，简单的理解为（头部对齐）
- flex-end： 同上相反行尾对齐
- center： 行中间对齐
- space-between： 两端对齐，且能够达到Flex子项间的间距相等，可理解为（等间距的行内分布）
- space-around： 间距相等，且中间间距是两端间距的二倍
-
align-items: stretch | flex-start | flex-end | center | baseline;
用于指定侧轴方向上Flex子项的对齐方式【align：排列，校准|items：项目】
- stretch： 默认值，当Flex子项未设置高度或高度值为auto时，stretch起作用，将Flex子项的高度设置为行高度，可理解为（将占满整个容器的高度）【stretch：伸展，拉长，撑大，有弹性】
- flex-start： 与侧轴开始位置对齐，（顶部对齐）
- flex-end： 同上相反，（底部对齐）
- center： 侧轴方向上中间对齐，（以中轴线为中心，进行排列）
- baseline： 基线对齐，以项目的第一行文字的基线对齐
-
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
多行情况下的对齐方式
-
扩展知识：》align-self：单独指定某Flex子项的对齐方式
》flex复合属性：用于指定Flex子项如何分配空间（flex-grow|flex-shrink|flex-basis）
2. 面试中有关Flex布局的高大上阐述技巧：
-
什么是Flex布局（回答的时候尽量能够说出完整的英文）
Flex是 Flexible Box的缩写，意为 “弹性布局” ，用来为盒装模型提供最大的灵活性，可以随着页面大小的改变自适应页面布局。
-
如何设置Flex布局
Flex布局作用的对象是子项目，样式命令应当写在包裹子项目的父元素上
块级元素： {display：flex；} 行内元素： {display：inline-flex；}
设置为Flex布局以后，子元素的 float、clear和vertical-align属性将会失效
