css3弹性盒子模型

　　当下各种手机，平板尺寸不一，如果盒模型只能固定尺寸，不能随意压缩，将不能很好的迎合这个时代。所以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 }

效果：