css3弹性布局

弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。

其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：

flex-flow: <flex-direction> || <flex-wrap>

flex-direction: row（初始值） | row-reverse | column | column-reverse

flex-wrap: nowrap（初始值） | wrap | wrap-reverse

flex-direction定义了弹性项目在弹性容器中的放置方向，默认是row，即行内方向（一般而言是由左往右，但注意这个和书写模式有关）。

flex-wrap定义是否需要拆行以使得弹性项目能被容器包含。*-reverse代表相反的方向。

两者结合起来即flex-flow属性就确定了弹性容器在main axis和cross axis两个方向上的显示方式，下面的例子很直观的说明了各个属性值的区别：

[css] view plain copy

 

1. .flex-container {  
2.     display: flex;  
3. }  
4. .flex-container.first {  
5.     flex-flow: row;  
6. }  
7. /* Initial value. Main-axis is 
8.    inline, no wrap. */  
9.   
10. .flex-container.second {  
11.     flex-flow: column wrap;  
12.     -webkit-flex-flow: column wrap;  
13. }  
14. /* Main-axis is block-direction (top to bottom) 
15.    and lines wrap in the inline direction (rightwards). */  
16.   
17. .flex-container.third {  
18.     flex-flow: row-reverse wrap-reverse;  
19. }  
20. /* Main-axis is the opposite of inline direction 
21.    (right to left). New lines wrap upwards. */  
22. /* other styles just for format */  
23.   
24. ul {  
25.     padding: 0;  
26. }  
27. li {  
28.     list-style: none;  
29. }  
30. .flex-container {  
31.     background: deepskyblue;  
32.     width: 200px;  
33.     height: 200px;  
34.     margin: 5px auto;  
35. }  
36. .flex-container.first {  
37.     height: 100px;  
38. }  
39. .flex-item {  
40.     background: tomato;  
41.     padding: 5px;  
42.     width: 80px;  
43.     height: 80px;  
44.     margin: 5px;  
45.     line-height: 80px;  
46.     color: white;  
47.     font-weight: bold;  
48.     font-size: 2em;  
49.     text-align: center;  
50. }  
51. h1 {  
52.     font-size: 22px;  
53.     text-align: center;  
54. }  
55. .flex-demo {  
56.     display: flex;  
57. }  

上例中的第1个弹性项列表使用了默认属性也就是row且不拆行，弹性项的宽度在需要的时候会被压缩。
第2个列表使用了column wrap，表示主轴方向是从上往下，而行拆分的方向是行内方向（向右）。
而第3个列表使用了row-reverse wrap-reverse，表示主轴方向是行内相反方向（从右到左），新行向上拆分。