布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。
一、布局模型
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：
水平主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置叫做main start，结束位置叫main end；交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
二、伸缩容器属性
伸缩容器支持的属性有：
- display
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1、display
该属性用来指定元素是否为伸缩容器：
display:flex | inline-flex
- flex:产生块级伸缩容器。
- inline-flex:行内级伸缩容器。
注意：当display：flex时，css的colums在伸缩容器上没有效果，float，clear，vertical-align在伸缩项目上没有效果。
2、flex-direction
该属性用来指定主轴方向：
flex-direction: row | row-reverse | column | column-reverse
- row（默认值）: 主轴为水平方向，起点在左端，伸缩项目从左向右排列。
- row-reverse ：主轴为水平方向，起点在右端，伸缩项目从右到左排列。
- column: 主轴为水平方向，起点在左端，伸缩项目从上到下排列。
- column-reverse ：主轴为水平方向，起点在右端，伸缩项目从上到下排列
3、flex-wrap
该属性主要用来指定伸缩容器主轴线方向空间不足的情况下，是否换行已经如何换行：
flex-wrap: nowrap | wrap | wrap-reverse
nowrap ：不换行。
wrap: 允许换行，从上到下。
wrap-reverse ：允许换行，从下到上。
4、flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的缩写版本，同时定义了伸缩容器的主轴和侧轴，默认值为row nowrap。
flex-flow: flex-direction flex-wrap;
5、justify-content
改属性定义了项目沿主轴的对齐方式：
justify-content: flex-start | flex-end | center | space-between | space-around
具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间的间隔都相等
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
6、align-items
该属性定义了项目在交叉轴的对齐方式：
align-items: flex-start | flex-end | center | baseline | stretch
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
7、align-content
该属性用来调整项目出现换行后在交叉轴上的对齐方式：
align-content: flex-start | flex-end | center | space-between | space-around | stretch
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
三、伸缩项目属性
伸缩容器支持的属性有：
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1、order
这个属性用来定义项目的排序顺序。数值越小，排列越靠前，默认值为0：
order: integer
2、flex-grow
该属性用来定义伸缩项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。如果所有的伸缩项目的flex-grow设置为1，那么每个伸缩项目将设置为一个大小相等的剩余空间。如果将其中一个伸缩项目设置为2，那么这个项目所占的剩余空间是其他项目所占的剩余空间的两倍：
flex-grow：number
3、flex-shrink
该属性用来定义伸缩项目的收缩能力，默认值为1：
flex-shrink：number
比如：将某个项目设为 flex-shrink：3，则该元素在空间不足的情况下，缩小为其他元素大小的1/3.
4、flex-basis
该属性用来定义伸缩项目的基准值，剩余的空间按比率进行伸缩：
flex-basis：length | auto
5、flex
该属性是,flex-grow,flex-shrink,flex-basis这三个属性的缩写：
flex：none | flex-grow lex-shrink flex-basis
6、align-self
该属性用来设置单独项目在交叉轴上的对齐方式，会覆写默认的对齐方式：
align-self：auto | flex-start | flex-end | center | baseline | stretch
- auto：伸缩项目按照自身设置的宽高显示，如果没有设置，则按stretch来计算其值。
- flex-start：伸缩项目向交叉轴的起始位置靠齐。
- flex-end：伸缩项目向交叉轴的结束位置靠齐。
- center：伸缩项目向交叉轴的中心位置靠齐。
- baseline：按基线对齐。
- stretch（默认值）：在交叉轴方向沾满伸缩容器。
