css3弹性盒子模型

　　当下各种手机，平板尺寸不一，如果盒模型只能固定尺寸，不能随意压缩，将不能很好的迎合这个时代。所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model)。

　　弹性盒模型可以水平布局，可以垂直布局，还可以调换顺序，可以设置不等的百分比等。

1.弹性盒子column分栏

 <h2>1.弹性盒子column分栏</h2>
     <div class="freebox">
         <img src="data:image/moon.jpg" alt="天宫二号" /> 9月15日晚10点04分，八月十五中秋节夜晚，甘肃酒泉，天宫二号飞行器发射升空。在酒泉卫星发射中心，一轮满月周围惊现一圈月晕，这为即将升空的火箭背景加分不少。（图片来源：东方IC）
         <p>
              这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻.
         </p>
         <p>
              这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻，这是一段新闻.
         </p>
     </div>

 /*弹性盒子分栏*/

 .freebox {
     -webkit-column-count:;
     -webkit-column-rule-style: dotted;
     -webkit-column-gap: 30px;
     -moz-column-count:;/*兼容火狐浏览器*/
     -moz-column-rule-style: dotted;
     -moz-column-gap: 30px;
     column-count:;/*兼容原生css*/
     column-rule-style: dotted;
     column-gap: 30px;
     margin: 10px auto;
 }

 div img {
     width: 320px;
     height: 200px;
 }

 div p {
     text-indent: 30px;
 }

效果：

　　这个方法虽然非常好用，一句代码就能实现完美分栏，但是兼容性不佳，火狐，谷歌等浏览器都还处于试验阶段。

了解即可，不宜过分依赖，下面几种方法一样。

2.旧版弹性盒子居中布局

 <!-- 旧版弹性盒子居中布局 -->
     <h2>2.旧版弹性盒子居中布局</h2>
     <div class="centerimg">
         <img src="data:image/moon.jpg" alt="天宫二号" />
     </div>

 /*旧版弹性盒子居中布局*/

 .centerimg {
     width: 600px;
     height: 400px;
     margin: 10px auto;
     display: -webkit-box;
     display: -moz-box;
     display: box;
     -webkit-box-pack: center;
     -moz-box-pack: center;
     box-pack: center;
     -webkit-box-align: center;
     -moz-box-align: center;
     box-align: center;
     background: #a7ffa7;
 }

效果：

3.新版弹性盒子排序

 <!-- 新版弹性盒子排序 -->
     <h2>3.新版弹性盒子排序</h2>
     <div class="contant_row">
         <div class="first">
             1号盒子排第三（-webkit-order:3）
         </div>
         <div class="second">
             2号盒子排第一（-webkit-order:1）
         </div>
         <div class="third">
             3号盒子排第二（-webkit-order:2）
         </div>
     </div>
     <div class="contant_column">
         <div class="first">
             1号盒子排第三（-webkit-order:3）
         </div>
         <div class="second">
             2号盒子排第一（-webkit-order:1）
         </div>
         <div class="third">
             3号盒子排第二（-webkit-order:2）
         </div>
     </div>

 /*新版弹性盒子排序*/

 .contant_row {
     width: 600px;
     height: 200px;
     margin: 10px auto;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: row;
     -moz-flex-direction: row;
     flex-direction: row;
     border: 1px solid #f00;
 }

 .contant_column {
     width: 600px;
     height: 200px;
     margin: 10px auto;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: column;
     -moz-flex-direction: column;
     flex-direction: column;
     border: 1px solid #f00;
 }

 .first {
     width: 100px;
     height: 100px;
     -webkit-flex:;
     -moz-flex:;
     flex:;
     -webkit-order:;
     -moz-order:;
     order:;
     color: #fff;
     background: red;
 }

 .second {
     width: 100px;
     height: 100px;
     -webkit-flex:;
     -moz-flex:;
     flex:;
     -webkit-order:;
     -moz-order:;
     order:;
     color: #fff;
     background: green;
 }

 .third {
     width: 100px;
     height: 200px;
     -webkit-flex:;
     -moz-flex:;
     flex:;
     -webkit-order:;
     -moz-order:;
     order:;
     color: #fff;
     background: blue;
 }

效果：