几个CSS3的flex弹性盒模型布局的简单例子演示

Flexible Box(弹性盒子)能让页面的分布更合理和方便，
这是之前使用常规的布局方式所做不到的。

1. <div class="warp">  
2.     <div class="modular">1</div>  
3.     <div class="modular">2</div>  
4.     <div class="modular">3</div>  
5.     <div class="modular">4</div>  
6. </div>  

display:flex和display:box有什么区别？

前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。

1. /*父级*/  
2. .warp{   
3.     width: 100%;   
4.     height: 100px;   
5.     /*这个是用来定义伸缩容器，是内联还是块取决于设置的值。*/  
6.     /*这个时候，他的所有子元素将变成flex文档流，称为伸缩项目。*/  
7.     /*-------------------------------------------------------------*/  
8.     display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
9.     display: -moz-box; /* Firefox 17- */  
10.     display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
11.     display: -moz-flex; /* Firefox 18+ */  
12.     display: -ms-flexbox; /* IE 10 */  
13.     display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */  
14.     /*-------------------------------------------------------------*/  
15.     /*一起使用box-align 和 box-pack 属性，对子元素进行居中*/  
16.     -webkit-box-pack:justify;   
17.     -webkit-box-align: ustify;   
18.     -moz-box-pack:justify;   
19.     -moz-box-align:justify;   
20.     box-pack:justify;   
21.     box-align:justify;   
22.     /*-------------------------------------------------------------*/  
23.     /*定义了伸缩项目放置在伸缩容器的方向*/  
24.     flex-direction:row;   
25.     -webkit-flex-direction:row;   
26.     /*定义伸缩容器里是单行还是多行显示*/  
27.     flex-wrap:nowrap;   
28.     /*flex-direction”和“flex-wrap”属性的缩写版本,默认row nowrap*/  
29.     flex-flow:row nowrap;   
30.     /*设置伸缩容器在横向方向上的对齐方式。*/  
31.     justify