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 }

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 }

 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 }