布局：盒模型布局

 /*盒子布局*/
 .topLeft{   display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:box; -webkit-box-pack:start; -moz-box-pack:start; -ms-flex-pack:start; box-pack:start; -webkit-box-align:start; -moz-box-align:start; -ms-flex-align:start; box-align:start; }
 .topCenter{ display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:box; -webkit-box-pack:center; -moz-box-pack:center; -ms-flex-pack:center;  box-pack:center; -webkit-box-align:start; -moz-box-align:start; -ms-flex-align:start;  box-align:start;  }
 .topRight{  display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:box; -webkit-box-pack:end; -moz-box-pack:end;-ms-flex-pack:end;   box-pack:end; -webkit-box-align:start; -moz-box-align:start; -ms-flex-align:start; box-align:start; }
 

 .middleLeft{  display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:box; -webkit-box-pack:start; -moz-box-pack:start; -ms-flex-pack:start;  box-pack:start; -webkit-box-align:center; -moz-box-align:center; -ms-flex-align:center;  box-align:center; }
 .middleCenter{display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:box; -webkit-box-pack:center; -moz-box-pack:center;-ms-flex-pack:center; box-pack:center; -webkit-box-align:center; -moz-box-align: center; -ms-flex-align:center; box-align:center; }
 .middleRight{ display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:box; -webkit-box-pack:end; -moz-box-pack:end;-ms-flex-pack:end;   box-pack:end; -webkit-box-align:center; -moz-box-align:center; -ms-flex-align:center;  box-align:center; }
 

 .bottomLeft{   display:-webkit-box; display:-moz-box;display:-ms-flexbox; display:box; -webkit-box-pack:start; -moz-box-pack:start; -ms-flex-pack:start;  box-pack:start; -webkit-box-align:end; -moz-box-align:end; -ms-flex-align:end;  box-align:end; }
 .bottomCenter{ display:-webkit-box; display:-moz-box;display:-ms-flexbox; display:box; -webkit-box-pack:center; -moz-box-pack:center;-ms-flex-pack:center;box-pack:center; -webkit-box-align:end; -moz-box-align:end; -ms-flex-align:end; box-align:end; }
 .bottomRight{  display:-webkit-box; display:-moz-box;display:-ms-flexbox; display:box; -webkit-box-pack:end; -moz-box-pack:end; -ms-flex-pack:end;box-pack:end; -webkit-box-align:end; -moz-box-align:end; -ms-flex-align:end; box-align:end;}

-webkit-box-orient:vertical; -moz-box-orient:vertical; -ms-box-orient:vertical; box-orient:vertical;   
/*设置在父元素上，该属性定义子元素是如何排列的。*/

-webkit-box-direction:reverse; -moz-box-direction:reverse; -ms-box-direction:reverse; box-direction:reverse;
/*设置在父元素上，该属性定义子元素的排列顺序*/

-webkit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1;box-flex:1;
/*设置在子元素上，如果两个元素设置了相等的宽度width；值为1时弹性填充，值为0时固定宽度值*/