当下各种手机，平板尺寸不一，如果盒模型只能固定尺寸，不能随意压缩，将不能很好的迎合这个时代。所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model)。
弹性盒模型可以水平布局，可以垂直布局，还可以调换顺序，可以设置不等的百分比等。
1.弹性盒子column分栏
1 <h2>1.弹性盒子column分栏</h2> 2 <div class="freebox"> 3 <img src="image/moon.jpg" alt="天宫二号" /> 9月15日晚10点04分，八月十五中秋节夜晚，甘肃酒泉，天宫二号飞行器发射升空。在酒泉卫星发射中心，一轮满月周围惊现一圈月晕，这为即将升空的火箭背景加分不少。（图片来源：东方IC） 4 <p> 5 这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻. 6 </p> 7 <p> 8 这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻. 9 </p> 10 </div>
1 /*弹性盒子分栏*/ 2 3 .freebox { 4 -webkit-column-count: 3; 5 -webkit-column-rule-style: dotted; 6 -webkit-column-gap: 30px; 7 -moz-column-count: 3;/*兼容火狐浏览器*/ 8 -moz-column-rule-style: dotted; 9 -moz-column-gap: 30px; 10 column-count: 3;/*兼容原生css*/ 11 column-rule-style: dotted; 12 column-gap: 30px; 13 margin: 10px auto; 14 } 15 16 div img { 17 width: 320px; 18 height: 200px; 19 } 20 21 div p { 22 text-indent: 30px; 23 }
效果：
这个方法虽然非常好用，一句代码就能实现完美分栏，但是兼容性不佳，火狐，谷歌等浏览器都还处于试验阶段。
了解即可，不宜过分依赖，下面几种方法一样。
2.旧版弹性盒子居中布局
1 <!-- 旧版弹性盒子居中布局 --> 2 <h2>2.旧版弹性盒子居中布局</h2> 3 <div class="centerimg"> 4 <img src="image/moon.jpg" alt="天宫二号" /> 5 </div>
1 /*旧版弹性盒子居中布局*/ 2 3 .centerimg { 4 width: 600px; 5 height: 400px; 6 margin: 10px auto; 7 display: -webkit-box; 8 display: -moz-box; 9 display: box; 10 -webkit-box-pack: center; 11 -moz-box-pack: center; 12 box-pack: center; 13 -webkit-box-align: center; 14 -moz-box-align: center; 15 box-align: center; 16 background: #a7ffa7; 17 }
效果：
3.新版弹性盒子排序
1 <!-- 新版弹性盒子排序 --> 2 <h2>3.新版弹性盒子排序</h2> 3 <div class="contant_row"> 4 <div class="first"> 5 1号盒子排第三（-webkit-order:3） 6 </div> 7 <div class="second"> 8 2号盒子排第一（-webkit-order:1） 9 </div> 10 <div class="third"> 11 3号盒子排第二（-webkit-order:2） 12 </div> 13 </div> 14 <div class="contant_column"> 15 <div class="first"> 16 1号盒子排第三（-webkit-order:3） 17 </div> 18 <div class="second"> 19 2号盒子排第一（-webkit-order:1） 20 </div> 21 <div class="third"> 22 3号盒子排第二（-webkit-order:2） 23 </div> 24 </div>
1 /*新版弹性盒子排序*/ 2 3 .contant_row { 4 width: 600px; 5 height: 200px; 6 margin: 10px auto; 7 display: -webkit-flex; 8 display: flex; 9 -webkit-flex-direction: row; 10 -moz-flex-direction: row; 11 flex-direction: row; 12 border: 1px solid #f00; 13 } 14 15 .contant_column { 16 width: 600px; 17 height: 200px; 18 margin: 10px auto; 19 display: -webkit-flex; 20 display: flex; 21 -webkit-flex-direction: column; 22 -moz-flex-direction: column; 23 flex-direction: column; 24 border: 1px solid #f00; 25 } 26 27 .first { 28 width: 100px; 29 height: 100px; 30 -webkit-flex: 1; 31 -moz-flex: 1; 32 flex: 1; 33 -webkit-order: 3; 34 -moz-order: 3; 35 order: 3; 36 color: #fff; 37 background: red; 38 } 39 40 .second { 41 width: 100px; 42 height: 100px; 43 -webkit-flex: 1; 44 -moz-flex: 1; 45 flex: 1; 46 -webkit-order: 1; 47 -moz-order: 1; 48 order: 1; 49 color: #fff; 50 background: green; 51 } 52 53 .third { 54 width: 100px; 55 height: 200px; 56 -webkit-flex: 2; 57 -moz-flex: 1; 58 flex: 1; 59 -webkit-order: 2; 60 -moz-order: 2; 61 order: 2; 62 color: #fff; 63 background: blue; 64 }
效果：
