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