互联网发展至今，界面的搭建基本都是采用CSS的布局，基于盒子模型，依赖 display属性 ， position属性， float属性。但对于那些特殊布局非常不方便，比如，垂直居中。一种全新的针对web和移动开发布局应运而生：Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

任何一个容器都可以指定为Flex布局。

#box{

display: flex; width: 500px; height: 300px; border: 10px solid red;}

首先要有个容器，并设置display:flex;display:-webkit-flex;该容器有以下六个属性：

flex-direction (元素排列方向)

row, row-reverse, column, column-reverseflex-wrap (换行) nowrap, wrap, wrap-reverseflex-flow (以上两者的简写) flex-direction || flex-wrapjustify-content (水平对齐方式) flex-start, flex-end, center, space-between, space-aroundalign-items (垂直对齐方式) stretch, flex-start, flex-end, center, baselinealign-content (多行垂直对齐方式) stretch, flex-start, flex-end, center, space-between, space-around

项目的属性：

order 排列顺序，数值，默认0

"integer"flex-grow 如图示7，定义放大比例，默认0，即如果存在剩余空间，也不放大。 "number"flex-shrink 如图示8，定义缩小比例，默认1，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 "number"flex-basis 定义项目占据的主轴空间，默认auto。会根据flex-direction定义的主轴（水平或者垂直），定义项目本来的大小，跟width或者height一样。flex 推荐，以上三个的缩写，默认 0 1 auto "flex-grow" "flex-shrink" "flex-basis"align-self 如图示9，单个项目有与其他项目不一样的对齐方式，可覆盖align-items "auto","flex-start","flex-end","center","baseline","stretch"　

属性详解：

1.flex-direction

row (从左往右)默认

row-reverse (从右往左)column (从上往下)column-reverse (从下往上)

2.flex-wrap

nowrap (不换行)默认

wrap (换行，且往下一行换)wrap-reverse (换行，且往上一行换)

3.flex-flow，是flex-direction和flex-wrap的简写形式。

flex-flow:<flex-direction> || <flex-wrap>;

4.justify-content

flex-start

flex-endcenterspace-betweenspace-around

5.align-items

stretch 默认

flex-startflex-endcenterbaseline 项目第一行文字的基准线对齐

6.align-content

stretch 默认

flex-startflex-endcenterspace-betweenspace-around

7.flex-grow

定义了放大比例，默认为0，即如果存在剩余空间，也不会放大。但是，如果所有项目的flex-grow属性为1，则他们将等分剩余空间（如果有的话），如果其中一个为2，则他是其他项目的2倍宽度。

8.flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，项目将缩小。如果有一个项目的flex-shrink为0，其他都为1，空间不足时，前者不缩小。

9.align-self，定义项目自己的对齐方式