概念
Flex是Flexible box的缩写，意思是弹性布局。用来为盒模型提供最大的灵活性。
传统的布局，是依赖display + position + float属性实现的。这种组合方案，对于一些特殊的布局实现起来很不方便。
任何一个容器都可以指定为Flex布局。但需要注意的是，容器设置为Flex布局后，其内的子元素float、clear和vertical-align都将失效。
容器：采用Flex布局的元素，成为Flex容器，简称容器。
项目：Flex容器内所以子元素自动成为容器的成员，称为Flex项目，简称项目。
容器默认存在两根轴，水平主轴（从左至右）和垂直交叉轴（从上至下）。
容器的常用属性
容器相当于父元素，用在父元素上的属性，有如下6个：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。
flex-direction
该属于用于设置主轴的方向。有4个可选值：
- row: （默认值）主轴为水平方向，起点在左端，从左至右排列；
- row-reverse：主轴为水平方向，起点在右端，从右至左排列；
- column：主轴为垂直方向，起点在上沿，从上至下排列；
- column-reverse：主轴为垂直方向，起点在下沿，从下至上排列。
flex-wrap
该属性用于控制项目（子元素）是否换行。有3个可选值：
- nowrap：（默认值）不换行；
- wrap：换行，第一行在上方；
- wrap-reverse：换行，第一行在下方。
注意：默认情况下，是不换行的，如果父级容器装不下，会缩小所有子元素的宽度，使子元素挤在一行。
flex-flow
该属性是flex-direction和flex-wrap的简写形式，默认值是row nowrap。
justify-content
该属性设置主轴上子元素的对齐方式。有5个可选值（注意：主轴是可以改变的，可以是水平方向，也可以是垂直方向，所以子元素的对齐方式要参考主轴方向）：
- flex-start：（默认值）左对齐，沿着主轴开始到末尾对齐；
- flex-end：右对齐，沿着主轴末尾至开始对齐；
- center：居中对齐；
- space-around：每个项目（子元素）两侧的间隔相等。所以，项目（子元素）之间的间隔比项目与边框的间隔大一倍；
- space-around：两端对齐，项目（子元素）之间的间隔都是相等的。
align-items
该属性设置交叉轴上的子元素的对齐方式。适合用于项目都在一行，不适用于多行项目。有5个可选值（注意：同样交叉轴也是可以改变的，可以是水平方向，也可以是垂直方向，所以子元素的对齐方式要参考交叉轴方向）
- flex-start：交叉轴的起点对齐；
- flex-end：交叉轴的终点对齐；
- center：交叉轴的中点对齐，也就是垂直居中；
- baseline：项目的第一行文字的基线对齐；
- stretch：（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content
该属性用于设置当项目有多行的时候，在交叉轴的排列方式。有6个可选值：
- flex-start：与交叉轴的起点对齐；
- flex-end：与交叉轴的终点对齐；
- center：与交叉轴的中点对齐；
- space-around：交叉轴方向上，项目之间的间隔比两侧项目距边框的间隙大一倍；
- space-between：交叉轴方向上，两端对齐，项目之间的间隔平均分布；
- stretch：（默认值）占满整个交叉轴；
align-content：小shy在3.5提到过align-items适用于子元素在单行中使用，这个align-content则就是为了子元素多行的时候设置交叉轴的子元素的排列方式。 该属性可能取6个值：
flex-start：与交叉轴的起点对齐； flex-end：与交叉轴的终点对齐； center：与交叉轴的中点对齐； space-around：根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍； space-between：与交叉轴两端对齐，轴线之间的间隔平均分布； stretch：(默认值)，占满整个交叉轴；
项目（子元素）的常用属性
用在项目也就是子元素上的属性，有如下6个：order、flex-grow、flex-shrink、flex-basis、flex、align-self。
order
该属性用来定义项目的排列顺序。值越小，排列越靠前，默认为0。
flex-grow
该属性用来定义项目的放大比例。默认为0，即如果存在剩余空间，也不放大。
注意：只对容器内存在的剩余空间进行按比例分配。即如果各项目占满容器，此项设置无效。如果存在剩余空间，按各项目的flex-grow设置的值按比例分配剩余空间。
flex-shrink
该属性用来定义项目的缩小比例。默认为1，即如果空间不足，该项目将缩小。
注意：只有当容器内项目宽度超过容器时，该属性生效。并且只针对超出的宽度进行按比例分配缩小各项目。当对某项目设置flex-shrink：0时，该项目不会被缩小。并且负值对该属性无效。
flex-basis
该属性是用来定义项目占据主轴空间的大小，默认值为auto，即项目本来的大小。
注意：当主轴为水平方向时，flex-basis设置的是项目的宽，优先级比width高；当主轴为竖直方向时，flex-basis设置的是项目的高，优先级比height高。
flex
该属性是flex-grow、flex-shrink、flex-basis三个属性的简写形式，默认值为0 1 auto，后两个属性可选。
同时，该属性有两个快捷值：auto，代表1 1 auto；none，代表0 0 auto。
所以，如果所有的项目设置flex:1，则项目会均分主轴剩余空间；如果一个项目设置flex:2，其他项目设置flex:1，则前者占据的剩余空间将比其他多一倍。也就是项目占多少份，flex设置对应的值即可。
align-self
该属性可以设置单个项目的对齐方式，也就是可以覆盖容器元素的align-items属性，默认值为auto，表示继承父元素的align-items属性。可选值包括：auto、flex-start、flex-end、center、baseline、stretch。
总结
本文是对flex盒模型的一些概念和属性的总结，方便日后查阅。
如有错漏，欢迎指正讨论！！！
