flex 布局

/* 设置盒子为弹性布局 */   父盒子的CSS属性
display: flex;
/* 设置主轴的排列方式，默认是标准 左到右边 */
flex-direction: row;
/* 设置主轴的排列方式 */
justify-content: space-around;
/* 定义项目在交叉轴的对其方式 */
align-items: center;
 
父盒子中的项目CSS属性
 
/* order:定义项目在主轴的排列顺序，order小，项目排列靠前 */
order: -1;
/* 定义项目占的宽度 默认为0 */
如何一个项目为1，则占剩余的空间
如果为1，1,2.      2占二分之一，其他两个占四分之一
flex-grow: 4;
 
 
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html（阮一峰博客详细介绍了flex布局，可以参考）