Flex是CSS弹性盒布局，相较于DIV+CSS页面布局初期的块元素浮动，flex可以让一些特殊的布局变得更灵活、更易用，它可以快速实现元素的垂直居中，可以在不使用多层嵌套和复杂计算的情况下让元素平均排列。

注意：flex布局不支持IE9及之前版本的浏览器，IE10需要添加兼容性前缀，即：display:-ms-flexbox;

浏览器兼容性：IE 10+、Firefox 22+、Chrome 21+ 、Safari 6.1+ 、Opera 12.1+

首先，我们要给父元素定义一个弹性盒布局

display:flex;
display:-ms-flexbox;
display:-moz-box;
display:-webkit-box;
display:-webkit-flex;

给父元素定义主轴

flex-direction:row;/*横轴作为主轴（默认）*/
flex-direction:row-reverse;/*横轴反向作为主轴*/
flex-direction:column;/*纵轴作为主轴*/
flex-direction:column-reverse;/*纵轴反向作为主轴*/

在父元素上给子元素的主轴定义排列方式

justify-content:flex-start;/*从起始侧排列*/
justify-content:flex-end;/*依次将元素排列在尾部*/
justify-content:center;/*将元素居中排列*/
justify-content:space-between;/*将元素两端对齐（2个及2个以上子元素生效）*/
justify-content:space-around;/*每个元素的两侧间隔相等（2个及2个以上子元素生效）*/
justify-content:space-evenly;/*元素之间的间隔同边框相等（2个及2个以上子元素生效）（部分老旧浏览器可能不适用）*/

在父元素上给子元素的副轴（交叉轴）定义排列方式

align-items:flex-start;/*从起始侧排列*/
align-items:flex-end;/*依次将元素排列在尾部*/
align-items:center;/*将元素居中排列*/

在父元素上定义子元素的换行（拆列）与压缩

flex-wrap:wrap;/*子元素会在必要的时候换行或拆列，且大小不会被压缩*/
flex-wrap:no-wrap;/*子元素不会换行和拆列，且大小可能会被压缩*/
flex-wrap:wrap;/*子元素会在必要的时候换行或拆列，规定以反向的顺序*/

在父元素定义多轴线的对齐方式（单轴线不起作用）

align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:stretch;
align-content:space-between;
align-content:space-around;
align-content:flex-start;/*元素被拉伸以适应*/

用于子元素的布局

flex-grow:1;/*子元素弹性盒布局的所占比例，如3个元素，值分别是1，3，1，那么，它们主轴上大小的比例将是1:3:1，即1/5、3/5、1/5 */
flex-shrink:0;/*在父元素所占空间不足的情况下，子元素的大小是否会被挤压，0不会被挤压，1会被挤压。注意：这里与flex-wrap的区别 ，父元素flex-wrap:wrap，子元素不被挤压，但可能会换行（拆列），flex-shrink:0，子元素不被挤压，且不会换行（拆列）*/
align-self:flex-start;/*元素本身的位置变化，此操作将会覆盖align-items*/
order:1;/*元素排列的顺序，值越大，排序越靠后*/
flex-basis:100px;/*元素的起始长度，类似于min-width、min-height*/