思洋互动网站建设学前班

弹性空间分配--box-flex属性（2）

运行结果如图4-5所示。

图4-5  具有空间弹性的菜单栏

代码分析：在示例4-5中，设置container类的盒元素的宽度为100%，即浏览器窗口的宽度，会随着窗口宽度的变化而变化。把菜单栏的box-flex属性设置为1，使其具有空间弹性以分配盒元素的剩余空间。如图4-5所示，菜单栏由灰线开始填充了盒元素的剩余空间，菜单栏本身的宽度变大了。在本示例中，当窗口的宽度改变时，菜单栏的宽度也会跟着变化。      广州网站设计

3. 多个子元素的弹性空间

当盒元素内部的多个子元素都定义box-flex属性时，子元素的空间弹性是相对的。浏览器将会把各个子元素的box-flex属性值相加得到一个总值，然后根据各自的值占总值的比例来分配盒元素的剩余空间。

对于示例4-5中的文章列表栏目也设置弹性，值为2。调整样式表如下。

【示例4-6】 多个子元素的弹性空间分配。

广州网站设计

1. <style type="text/css"> 
2. .container {  
3.     width:100%;                     /* 设置盒元素的宽度为100% */  
4.     background-color:#CCC;  
5.     display:-webkit-box;  
6.     display:-moz-box;  
7.     display:box;  
8. }  
9. .container div {  
10.     color:#FFF;  
11.     font-size:12px;  
12.     padding:10px;  
13.     line-height:20px;  
14.     width:100px;                    /* 设置三个栏目的固定宽度100px */  
15. }  
16. .container div ul {  
17.     margin:0;  
18.     padding-left:20px;  
19. }  
20. .container .left-aside {  
21.     background-color:#F63;  
22.     /* 设置菜单栏具有空间弹性 */  
23.     -webkit-box-flex:1;             /* 兼容webkit内核 */  
24.     -moz-box-flex:1;                /* 兼容gecko内核 */  
25.     box-flex:1;                     /* 标准用法 */  
26. }  
27. .container .center-content {  
28.     background-color:#390;  
29.     /* 设置文章列表栏有空间弹性 */  
30.     -webkit-box-flex:2;             /* 兼容webkit内核 */  
31.     -moz-box-flex:2;                /* 兼容gecko内核 */  
32.     box-flex:2;                     /* 标准用法 */  
33. }  
34. .container .right-aside {  
35.     background-color:#039;  
36. }  
37. </style> 

广州网站建设

运行结果如图4-6所示。

图4-6  多个子元素的弹性空间分配

代码分析：在示例4-6中，菜单栏的box-flex属性值为1，文章列表栏的box-flex属性值为2。在分配剩余空间的时候，菜单栏仅分配1/3的剩余空间，文章列表则分配2/3的剩余空间。如图4-6所示，各栏目中灰线右边的部分为弹性分配的空间部分。      广州网站建设