CSS的box-align属性控制子元素布局实例

box-align 说明
box-align属性, 指定元素内子要素纵方向排列指定时使用。<规定框中子元素的显示次序。>
容器元素比子元素大很多的情况下，使用box-align属性，可以指定子元素的排序顺序，并且可以指定子元素如何表示。
还有，纵方向排列一说，可以解释为元素内子元素的配置方向默认值为水平，使用此属性后垂直方向进行排列。也可以使用 box-orient:vertical来设置子元素排列方向。

属性值
start：标准方向元素，各子要素上端沿着元素上端进行排列，余下的位置向下排序， 反方向元素的话，则沿着下端进行排序，余下的位置向上排序。<对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。 对于反方向的框，每个子元素的下边缘沿着框的底边放置。>
end：标准方向元素，各子要素下端沿着元素下端进行排列，余下的位置向上排序， 反方向元素的话，则沿着上端进行排序，余下的位置向下排序。<对于正常方向的框，每个子元素的下边缘沿着框的底边放置。 对于反方向的框，每个子元素的上边缘沿着框的顶边放置。>
center：剩余空间，进行均等分配。<均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。>
baseline：inline-axis和horizontal的场合，所有子元素baseline配置排列<如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。>
stretch：各子元素按照容器元素的高来自动排序（默认值）

关于居中
原来水平垂直居中写法为：height=line-height 实现垂直居中text-align实现水平居中
现在使用box-align实现垂直居中box-pack 实现水平居中

1.   
2.   
3.   
4.   
5.        
6.   
7.   
8. "width:300px; height: 300px; background-color: #ccc;  
9.   line-height: 300px; text-align: center;">   
10.        
11.   
12. "width:300px; height: 300px; background-color: #aaa;  
13.  display:-webkit-box;-webkit-box-pack: center;  
14.    ; -webkit-box-align:center">   
15.        
16.   
17.   
18.   

实例代码

1.   
2.   
3.   
4.   
5.   
6.   
7. div.prefix_sample1 {   
8. width:500px; height:100px;   
9. background-color:yellow;   
10. display:-moz-box;   
11. display:-webkit-box;   
12. display:-o-box;   
13. display:-ms-box;   
14. -moz-box-align:start;   
15. -webkit-box-align:start;   
16. -o-box-align:start;   
17. -ms-box-align:start;   
18. }   
19. div.prefix_sample2 {   
20. width:500px; height:100px;   
21. background-color:yellow;   
22. display:-moz-box;   
23. display:-webkit-box;   
24. display:-o-box;   
25. display:-ms-box;   
26. -moz-box-align:end;   
27. -webkit-box-align:end;   
28. -o-box-align:end;   
29. -ms-box-align:end;   
30. }   
31. div.prefix_sample3 {   
32. width:500px; height:100px;   
33. background-color:yellow;   
34. display:-moz-box;   
35. display:-webkit-box;   
36. display:-o-box;   
37. display:-ms-box;   
38. -moz-box-align:center;   
39. -webkit-box-align:center;   
40. -o-box-align:center;   
41. -ms-box-align:center;   
42. }   
43. div.prefix_sample4 {   
44. width:500px; height:100px;   
45. background-color:yellow;   
46. display:-moz-box;   
47. display:-webkit-box;   
48. display:-o-box;   
49. display:-ms-box;   
50. -moz-box-align:baselinebaseline;   
51. -webkit-box-align:baselinebaseline;   
52. -o-box-align:baselinebaseline;   
53. -ms-box-align:baselinebaseline;   
54. }   
55. div.prefix_sample5 {   
56. width:500px; height:100px;   
57. background-color:yellow;   
58. display:-moz-box;   
59. display:-webkit-box;   
60. display:-o-box;   
61. display:-ms-box;   
62. -moz-box-align:stretch;   
63. -webkit-box-align:stretch;   
64. -o-box-align:stretch;   
65. -ms-box-align:stretch;   
66. }   
67.     
68. div.aka {background-color:red;}   
69. div.midori {background-color:green;}   
70. div.ao {background-color:blue;}   
71.   
72.     
73.   
74.     
75.   
76. box-align:start;   
77. "prefix_sample1">   
78. "aka">abcde   
79. "midori">abcde   
80. "ao">abcde   
81.   
82.     
83. box-align:end;   
84. "prefix_sample2">   
85. "aka">abcde   
86. "midori">abcde   
87. "ao">abcde   
88.   
89.     
90. box-align:center;    
91. "prefix_sample3">   
92. "aka">abcde   
93. "midori">abcde   
94. "ao">abcde   
95.   
96.     
97. box-align:baselinebaseline;    
98. "prefix_sample4">   
99. "aka">abcde   
100. "midori">abcde   
101. "ao">abcde   
102.   
103.     
104. box-align:stretch;    
105. "prefix_sample5">   
106. "aka">abcde   
107. "midori">abcde   
108. "ao">abcde   
109.   
110.     
111.   
112.   

实例图