网页传统布局基于盒模型，依赖display属性，position属性，float属性。对于特殊布局很不方便，比如：垂直布局。W3C提出新的解决方案-Flex布局，可简便，完整，响应式实现各种页面布局，目前已经得到所有浏览器的支持。Flex布局作为未来布局的首选。
Flex布局是什么？
Flex是Flexible Box的缩写，意为弹性布局，为盒装模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局，dispaly:flex;
行内元素也可使用Flex布局，display:inline-flex;
Webkit内核的浏览器，必须加上-webkit前缀，display:-webkit-flex;display:flex.
设置Flex布局后，子元素float、clear和vertical-align属性将失效
基本概念，采用Flex布局的元素，称为Flex容器，所有子元素自动成为容器成员，称为Flex项目。
Flex默认存在两根轴：水平的主轴和垂直的交叉轴。主轴的开始位置叫main start ，结束位置较mian end;交叉轴的开始位置较cross start,结束位置较cross end。项目默认沿主轴排列。单个项目占据的主轴空间较mian size,占据的交叉轴空间叫cross size.
容器的属性：flex-direction flex-wrap flex-flow justify-content align-items align-content
flex-direction属性决定主轴的方向flex-direction:row|row-reverse|column|columen-reverse
row：主轴为水平，起点在左端
row-reverse:主轴为水平，起点在右端
column:主轴为垂直，起点在上沿
column-reverse:主轴为垂直，起点在下沿
flex-wrap属性定义，如果一条轴线排不下，如何换行，flex-wrap:nowrap|wrap|wrap-reverse.nowrap,不换行；warp:换行，第一行在上方.wrap-reverse:换行，第一行在下方
flex-flow属性是flex-direction和flex-wrap属性的简写，默认row nowarp.flex-flow: