移动端布局 Css3 弹性盒子模型封装 display:box;

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

Css:

/**
 * 开启弹性盒子   
 */
.disbox{display:-moz-box;display:-webkit-box;display:-ms-box;display:box;}

/**
 * 定义子盒子显示方式 h水平, v垂直   
 */
.box-orient-h{-webkit-box-orient: horizontal;-moz-box-orient: horizontal;-ms-box-orient: horizontal;box-orient: horizontal;}
.box-orient-v{-webkit-box-orient: vertical;-moz-box-orient: vertical;-ms-box-orient: vertical;box-orient: vertical;}

/**
 * 分配盒子空间
 * 子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和 
 */
.box-flex-1{-webkit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1;box-flex:1;}
.box-flex-2{-webkit-box-flex:2;-moz-box-flex:2;-ms-box-flex:2;box-flex:2;}
.box-flex-3{-webkit-box-flex:3;-moz-box-flex:3;-ms-box-flex:3;box-flex:3;}
.box-flex-4{-webkit-box-flex:4;-moz-box-flex:4;-ms-box-flex:4;box-flex:4;}
.box-flex-5{-webkit-box-flex:5;-moz-box-flex:5;-ms-box-flex:5;box-flex:5;}

/**
 * 管理水平方向上的空间分布 
 */
/* 可利用的空间在父盒子的两侧平均分配 */
.box-pack-center{-webkit-box-pack:center;-moz-box-pack:center;-ms-box-pack:center;box-pack:center;}
/* 所有盒子在父盒子的左侧，余下的空间在右侧 */
.box-pack-start{-webkit-box-pack:start;-moz-box-pack:start;-ms-box-pack:start;box-pack:start;}
/* 所有盒子在父盒子的右侧，余下的空间在左侧 */
.box-pack-end{-webkit-box-pack:end;-moz-box-pack:end;-ms-box-pack:end;box-pack:end;}
/* 余下的空间在盒子间平均分配 */
.box-pack-justify{-webkit-box-pack:justify;-moz-box-pack:justify;-ms-box-pack:justify;box-pack:justify;}

/**
 * 管理垂直方向上的空间分布
 */
/* 可用空间平均分配，上面一半，下面一半 */
.box-align-center{-webkit-box-align:center;-moz-box-align:center;-ms-box-align:center;box-align:center;}
/* 每个盒子沿父盒子的上边缘排列，余下的空间位于底部 */
.box-align-start{-webkit-box-align:start;-moz-box-align:start;-ms-box-align:start;box-align:start;}
/* 每个盒子沿父盒子的下边缘排列，余下的空间位于顶部 */
.box-align-end{-webkit-box-align:end;-moz-box-align:end;-ms-box-align:end;box-align:end;}
/* 所有盒子沿着它们的基线排列，余下的空间可前可后； */
.box-align-baseline{-webkit-box-align:baseline;-moz-box-align:baseline;-ms-box-align:baseline;box-align:baseline;}
/* 每个盒子的高度调整到适合父盒子的高度 */
.box-align-stretch{-webkit-box-align:stretch;-moz-box-align:stretch;-ms-box-align:stretch;box-align:stretch;}

/**
 * 盒子内容居中显示
 */
.box-center{-webkit-box-pack:center;-moz-box-pack:center;-ms-box-pack:center;box-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-box-align:center;box-align:center;}

/**
 * 避免溢出,设置换行显示
 */
.box-lines{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-box-lines:multiple;box-lines:multiple;}

该Css类是由Mr.K封装, 切勿用于商业用途
有什么意见或建议请联系在下面留言，觉得没用的请绕道~！

希望大家在这里能学到更多的东西，一起交流先进的前端技术

转自 [Mr.K - 专注前端开发]：http://www.cnkk.me/art/2015/08/144152240173410.html