Flexible Box 是什么
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。所以在2009年，w3c提出了一种可以简洁、快速弹性布局的属性，主要思想是给予容器控制内部元素高度和宽度的能力，这就是今天要说的Flexible Box，弹性布局。
由于浏览器的限制，在写代码之前推荐查询一下兼容模式，了解下目前flex的支持程度，我们可以通过CanIuse这个网站来进行查询，如下图，可以看到，除了对于IE支持一般之外，其他浏览器大多没啥毛病，但为了以防万一，在写代码的时候还是加上-webkit-这一前缀以防万一。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
重点！flex一共有两根轴：main axis（主轴）和cross axis（交叉轴），大家一般认为主轴就是水平，交叉轴就是垂直的。但是！这是错误的！请与水平垂直这两个方位的概念区分开，这是一个方位，如果说当年定义的时侯为什么不命名为vertical&horizon？？原因就是main axis没有一个固定的方位，所以请不要再通过水平垂直的方位来理解了。那么主轴是怎么区分的呢？其实很简单按照当前flex的方向，是水平排列还是垂直排列。如果是水平排列（row），主轴就是水平的，交叉轴就是垂直的，反之亦然。这是一个很重要的概念。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
属性描述 父容器的属性flex-direction :该元素决定主轴的方向（即子元素的排列方向） 默认值 :row 适用于 :flex 容器
属性 描述row 主轴为水平方向，起点在左端。
row-reverse 主轴为水平方向，起点在右端。
column 主轴为垂直方向，起点在上沿。
column-reverse 主轴为垂直方向，起点在下沿。
flex-wrap :设置或检索伸缩盒对象的子元素超出父容器时是否换行 默认值 :nowrap 适用于 :flex 容器
属性 描述nowrap 不换行(默认)
wrap 换行，第一行在上方
wrap-reverse 换行，第一行在下方
PS: flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap
.box { flex-flow: flex-direction flex-wrap|initial|inherit; }justify-content :定义了子元素在主轴上的对齐方式。 默认值 :flex-start 适用于 :flex 容器
属性 描述flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
align-items :定义了子元素在交叉轴上的对齐方式 默认值 :stretch 适用于 :flex 容器
属性 描述flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 子元素第一行文字的基线对齐,如果子标签内没有内容，将按照每个 div 的底部对齐
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度
align-items: stretch 时每个子元素的 height 必须为 auto 否则 height 属性会覆盖 stretch 的效果
如果 div 内没有内容，或者子标签内没有内容，将按照每个 div 的底部对齐
