display:flex是CSS3的新特性，是一个强大的布局神器。
在传统的布局中，通常使用浮动float、position，虽然能很好进行布局，但自从接触flex后，对前端的布局来说简直就是一种解放。上图为 flex在各浏览器和设备上的兼容性问题，可见除了IE浏览器外基本都支持了这一特性。不过即使这样也不用担心，还记得postcss的autoprefixer插件吗？结合webpack即可解决兼容问题。
使用flex只需在父元素上定义display:flex,然后子级的所有元素都具有了flex功能。
index.html
<div class="box">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">5</div>
</div>
index.css
.box { display:flex; }
.box-item { margin:5px; width:100px; height:100px; background:red; }
现在.box以及子元素都具备了flex特性，可以通过相应特性进行个性化布局，接下来将逐一介绍每一个特性。
flex术语图示
flex的两根轴
主轴水平方向
交叉轴垂直于主轴
这些属性应用在父级元素上
flex-direction
row 设置主轴为水平（默认从左到右）
row-reverse 设置主轴为水平（从右到左）
column 设置主轴为垂直（默认从上到下）
column-reverse 设置主轴为垂直（从下到上）
flex-wrap
nowrap 不自动换行（默认）
wrap 自动换行
wrap-reverse 从下到上开始换行
flex-flow
是flex-direction和flex-wrap的简写属性
justify-content
控制主轴的对齐方式
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐
space-around 使项目之间的间隔相等
align-items
控制单行交叉轴的对齐方式
flex-start 左对齐
flex-end 右对齐
center 居中
baseline 基线对齐
stretch 默认撑满整个容器高度
align-content
控制 多行交叉轴的对齐方式
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐
space-around 使项目之间的间隔相等
注意：如果垂直方向没有设置高度，那么align-items和align-content会失效
下面的几个属性是用于单个项目里面
align-self
覆盖align-items而在单独项目生效例子：align-self:flex-start;
order
改变项目位置，数值越小越靠前，可以是负数 例子：order:-1;
flex-grow
设置放大比例（无单位）例子：flex-grow:2;
flex-shrink
设置当空间不足时的收缩比例（无单位）例子：flex-shrink:2;
flex-basis
设置初始大小（有单位） 例子：flex-basis:20%;
flex
是flex-grow、flex-shrink、flex-basis的简写属性
- 单值（选其中之一）
一个无单位数(): 它会被当作flex-grow的值。
一个有效的宽度(width)值: 它会被当作flex-basis的值。
关键字none, auto,或initial.
例子：flex:auto; - 双值
第一个值必须为flex-grow。
第二个值可以是flex-shrink或者flex-basis
例子：flex:2 2;
- 三值
flex-grow>
flex-shrink>
flex-basis>
例子：flex:1 1 auto
参考文档
