FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题
为什么用flex？
①Flex为盒子模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。 ②更加符合响应式设计的特点。
虽然平时可以采取float+定位的方式进行布局，但是有时候在某些场景下使用flex会更加的快捷和方便。接下来，我们看一个flex比较经典的结构图：
flex分主轴（main axis）和交叉轴（cross axis），可以简单理解为x轴和y轴，主轴是和盒子内部子元素排列方向一致的。
比如盒子内部子元素是水平方向排列的，那么主轴就是x轴，y轴就是交叉轴了。反之，如果盒子内部子元素是垂直方向排列的，那么主轴就是y轴，x轴就是交叉轴了。
另外还有4个顶点概念：main start、 main end、 cross start、 cross end；以水平方向排列为例，main start就是主轴的开始顶点，main end是主轴的结束顶点，cross start就是交叉轴的开始，cross end是交叉轴的结束。
最后还有一个比较重要的概念：flex item的main size是子元素占主轴的空间，并非宽度；cross size是子元素占交叉轴的空间，并非高度。
所以要深入了解使用flex布局，首先搞清楚主轴和交叉轴。
flex-direction
作用：子元素在父元素盒子中的排列方式，决定主轴方向
row 默认值，主轴为水平方向，起点在左端
row-reverse 主轴为水平方向，起点在右端
column 主轴为垂直方向，起点在上端
column-reverse 主轴为垂直方向，起点在下端
flex-wrap
作用：子元素在父元素盒子中是否换行（列）
nowrap 默认值，不换行或不换列
wrap 换行或换列，第一行在上方或者第一列在左侧
wrap-reverse 换行或换列，但以相反的顺序，第一行在下方或者第一列在右侧
flex-flow，flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content
作用：项目在主轴上的对齐方式，也可以理解为存在剩余空间时，设置间距的方式
flex-start 默认值，左对齐，从左到右，挨着行的开头。
flex-end 右对齐，起点在右端，从右到左，挨着行的结尾
center 居中，起点在上端。
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍
stretch 默认值，轴线占满整个交叉轴。
align-items和align-content属性值center的区别
align-items属性可以应用于所有的flex容器，它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。有说法align-items处理的是单行，不能处理多行，其实是理解错误了，它处理单行是把所有子元素的每一行都当成独立都一个个体去处理，所以有单行处理的说法。
align-content只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐。
align-items:center;和align-content:center 总结
结论：从上表可知，对于align-items和align-content的区别，总结为以下两点： align-items属性是针对单独的每一个flex子项起作用，它的基本单位是每一个子项，在实例的几种情况下都有效果（当然要看具体的属性值）。 align-content属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行，两种情况下有效果：①子项多行且flex容器高度固定 ②子项单行，flex容器高度固定且设置了flex-wrap:wrap;
