flex（flexible box）布局是迄今为止最灵活的盒模型，它可以灵活方便地实现各种各样的布局
一、基础知识
1、flex布局分为块元素flex布局和行元素flex布局，可以使用display: flex来实现块级flex布局，使用display: inline-flex实现行级flex布局
2、设为flex布局后，子元素的float、clear、vertical-align将失效
3、采用flex布局的元素，称之为 flex容器；容器内的项目自动成为容器成员，称为 flex项目。容器的核心概念主要是主轴、侧轴、主轴起点，主轴终点、侧轴起点，侧轴终点，项目默认沿着主轴排列，对于一个主轴方向为从左到右的flex容器而言，如下：
二、弹性容器的属性
弹性容器有6个属性：
flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
1、flex-direction
这个属性设置主轴的方向，有四个值：row（从左到右，默认）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上），如：
2、flex-wrap
默认情况下，弹性项目排列在一条主轴上，而flex-wrap设置当主轴排列不下的时候，如何处理
nowrap默认值，表示不换行，当主轴排列不下的时候，就自动调节各个弹性项目的大小，使得可以在一条主轴上排列wrap排列不下的时候，就换行，且第一行在上方wrap-reverse排列不下的时候，就换行，且第一行在下方
3、flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的简写形式，它的默认值为row nowrap
4、justify-content
定义项目在主轴上如何对齐，图解如下：
5、align-items
align-items 属性概念上与justify-content类似，只不过它的参考轴是侧轴，它具有如下的属性值：
- flex-start 向侧轴起点对齐
- flex-end 向侧轴终点对齐
- center 向侧轴中点对齐
- stretch 默认值，当项目没有设置高度或者高度为auto的时候，拉伸占满整个容器高度
6、align-content
只有当有多根轴线的时候，align-content 定义对齐方式，其属性值有：flex-start、flex-end、center、stretch、space-between、space-around、baseline
三、弹性项目的属性
弹性容器的属性，是针对所有弹性项目全体而言的，而弹性项目的属性，则可以细致地控制每一个弹性项目
1、order
order属性定义项目在视觉上的排列属性，默认情况下，弹性项目的排列是以源码中定义的顺序显示的。但是如果定义了order属性，则可以脱离源码中出现顺序的限制，灵活排布。它的语法为order: 数值，数值越小，排列越前面，默认为0
2、flex-grow
1）当弹性容器的区域 > 弹性项目的区域总和的时候，弹性容器会有剩余空间，而flex-grow的作用，就是为每个弹性项目指定将如何分配这个剩余空间，这是一个比例系数，默认为0（表示有剩余空间也不分配）
2）假设当前弹性容器剩余100px的空间，而有A、B、C三个弹性项目，他们的flex-grow分别设为2、2、1，那么A、B、C将分别分得2/5、2/5、1/5，即40px、40px、20px
3、flex-shrink
当弹性容器区域不足以容纳弹性项目的时候，可以由flow-shrink属性指定如何缩小弹性项目。语法格式为：flow-shrink: <unsigned int>，默认情况下，属性值为1，表示空间不足的时候都将等比例缩小。如果设为0，那么空间不足时也不缩小
4、flex-basis
当我们期望有剩余区域时，在分配的时候，有某个区域能够总保持固定的大小的时候，就可以使用flex-basis属性。设置这个属性后，分配空间前，会先让设置该属性的项目获得相应的主轴大小，再用剩余的空间去分配，其语法格式为：
flex-basis: <length> | auto; /* 默认值为0 */
5、flex
这个属性是flex-grow、flex-shrink、flex-basis的复合，默认值为0 1 auto，即默认情况下，有剩余空间的时候保持不变，空间不足的时候等比例缩小，该属性还有两个特殊的属性值：
auto，相当于(1 1 auto)，表示有剩余空间时候等比例放大，空间不足等比例缩小none，相当于(0 0 auto)，表示不会弹性变化项目空间大小
6、align-self
这个属性可以覆盖弹性容器中align-items对当前项目的限制，也就是说可以允许当前项目有自己独特的对齐方式。默认值为auto，表示服从默认的align-items设置，它的取值有：auto、flex-start、flex-end、center、stretch、baseline