Home思洋影视事业部网站建设知识库
0 Comments

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

发布于：2012-12-11  |   作者：广州网站建设  |   已聚集：人围观
弹性空间分配--box-flex属性（1）

CSS 3新增的box-flex属性，用于定义盒元素内部的子元素是否具有空间弹性。当盒元素的尺寸缩小（或扩大）时，被定义为有空间弹性的子元素的尺寸也会缩小（或扩大）。每当盒元素有额外的空间时，具有空间弹性的子元素，会扩大自身大小来填补这一空间。基于webkit内核的替代私有属性是-webkit-box-flex，基于gecko内核的替代私有属性是-moz-box-flex。

1. 参数说明

box-flex属性的语法如下：

 广州网站建设
  1. box-flex: <value>; 

取值说明如下。

<value>：该属性值是一个整数或者小数，不可为负值，默认值为0.0。使用空间弹性属性设置，使得盒元素的内部元素的总宽度和总高度，始终等于盒元素的宽度与高度。不过只有当盒元素具有确定的宽度或高度时，才能表现出子元素的空间弹性。

2. 子元素的弹性空间

下面的示例中，在盒元素的内部设置了宽度相等的三栏：菜单、文章列表和工具，并设置菜单栏的box-flex属性，使其具有空间弹性。

【示例4-5】 具有空间弹性的菜单栏。

广州网站设计
  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>具有空间弹性的菜单栏</title> 
  6. <style type="text/css"> 
  7. .container {  
  8.     width:100%;                     /* 设置盒元素的宽度为100% */  
  9.     background-color:#CCC;  
  10.     display:-webkit-box;  
  11.     display:-moz-box;  
  12.     display:box;  
  13. }  
  14. .container div {  
  15.     color:#FFF;  
  16.     font-size:12px;  
  17.     padding:10px;  
  18.     line-height:20px;  
  19.     width:100px;                    /* 设置三个栏目的固定宽度100px */  
  20. }  
  21. .container div ul {  
  22.     margin:0;  
  23.     padding-left:20px;  
  24. }  
  25. .container .left-aside {  
  26.     background-color:#F63;  
  27.     /* 设置菜单栏具有空间弹性 */  
  28.     -webkit-box-flex:1;                 /* 兼容webkit内核 */  
  29.     -moz-box-flex:1;                /* 兼容gecko内核 */  
  30.     box-flex:1;                     /* 标准用法 */  
  31. }  
  32. .container .center-content {  
  33.     background-color:#390;  
  34. }  
  35. .container .right-aside {  
  36.     background-color:#039;  
  37. }  
  38. </style> 
  39. <body> 
  40. <div class="container"> 
  41.   <div class="left-aside"> 
  42.     <h2>菜单</h2> 
  43.     <ul> 
  44.       <li>HTML5</li> 
  45.       <li>CSS 3</li> 
  46.       <li>活动沙龙</li> 
  47.     </ul> 
  48.   </div> 
  49.   <div class="center-content"> 
  50.     <h2>文章列表</h2> 
  51.     <ul> 
  52.       <li>文本阴影</li> 
  53.       <li>色彩模式</li> 
  54.       <li>多重背景</li> 
  55.       <li>边框圆角</li> 
  56.       <li>新型盒布局</li> 
  57.       <li>盒子阴影</li> 
  58.     </ul> 
  59.   </div> 
  60.   <div class="right-aside"> 
  61.     <h2>工具</h2> 
  62.     <ul> 
  63.       <li>天气预报</li> 
  64.       <li>货币汇率</li> 
  65.     </ul> 
  66.   </div> 
  67. </div> 
  68. </body> 
  69. </html> 
标签：
飞机