display:flex;

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

.box{
width:100%;height:500px;border:solid red 2px;
display:flex;
//flex-direction:row;//row-reverse | column | column-reverse;
// flex-wrap:nowrap;// | wrap | wrap-reverse;
//flex-flow:row-reverse wrap-reverse;
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 | stretch;
//多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
}
.boxItem{
width:100px;
height:100px;
border:solid blue 1px;
// display:inline-flex;
//order:1;
//flex-grow:0;
//flex-shrink:1;
//flex:auto |none;
//align-self:auto | flex-start | flex-end | center | baseline | stretch;可覆盖align-items
}