盒布局

 1 /*盒子布局*/
 2 .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; }
 3 .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;  }
 4 .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; }
 5 
 6 .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; }
 7 .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; }
 8 .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; }
 9 
10 .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; }
11 .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; }
12 .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;}

 

转载于:https://www.cnblogs.com/jiunie/p/10995995.html