Flex布局是Css3中新加入的额外布局系统。

传统布局基于盒模型，依赖“display”、“position”、“float”属性，对于特殊布局非常不便。

因此2009年，W3C提出新的布局方案-Flex布局，但由于浏览器兼容问题，Flex布局并没有大范围铺开。

实现Flex布局的条件

1.必须有一个父级容器作为Flex容器(作为容器)

·定义一个Flex容器

.box{ display: flex; }

2.Flex容器内必须有子元素进行配合(作为项目)

项目内也可设置属性进行布局。

补充：

行内元素也可以使用Flex布局

.box{ display: inline-flex; }

webkit内核的浏览器，必须加上weibkit前缀

.box{ display: -webkit-flex; /* Safari */ display: flex; }

设成Flex后，子元素的float、clear和vertical-align属性将失效。

作用于容器的属性

flex-direction

决定主轴的方向(即项目的排列方向)

.container { flex-direction: row | row-reverse | column | column-reverse; }

它包含4个值

1.row默认值，水平从左到右

2.row-reverse,水平从右到左

3.column,垂直从上到下

4.column-reverse,垂直从下到上

flex-direction

flex-wrap

默认情况下，