本文為大家繼續分享CSS3彈性盒模型開發筆記第二篇，之前一篇以及為大家引入了CSS3彈性盒模型的相關介紹，點擊查看：CSS3彈性盒模型開發筆記（一）
box-flex屬性
box-flex屬性能夠靈活地控制子元素在盒子中的顯示空間。注意，顯示空間包括子元素的寬度和高度，而不只是子元素所在欄目的寬度，也可以說是子元素在盒子中所占的面積。該屬性在彈性布局中非常重要，它解決了傳統設計中習慣使用百分比定義彈性布局的弊端。box-flex屬性的基本語法：
box-flex:<number>
取值說明：
<number>屬性值是一個整數或者小數。當盒子中包含多個定義了box-flex屬性的子元素時，瀏覽器將會把這些子元素的box-flex屬性值相加，然后根據他們各自的值占總值的比例來分配盒子剩余的空間。注意，box-flex屬性只有在盒子擁有的確定的空間大小之后才能正確解析。在設計中，較穩妥的做法是為了盒子定義具體的width或height屬性值。
實戰體驗：自適應欄目寬度設計
在傳統的網頁設計中，如果要把一個欄目分成三欄，比較簡單的做法是把三個子元素的寬度都設置為33.3%。這種做法無法把父元素的寬度完全填充，當父元素的寬度足夠大的時候，用戶會看到未填充的空白區域。但是，如果為子元素設置了固定寬度值，彈性布局會變得更為復雜。如果使用box-flex屬性，這個問題就會迎刃而解。
html代碼：
XML/HTML Code復制內容到剪貼板
<body>
<h1><img src="images/web3_13.gif" /></h1>
<div id="box">
<!–左側欄目–>
<div id="box1"><img src="images/web3_01.gif" /></div>
<!–中間欄目–>
<div id="box2">
<h2><img src="images/web3_02.gif" /></h2>
<div><img src="images/web3_04.gif" /></div>
<div><img src="images/web3_05.gif" /></div>
<div><img src="images/web3_06.gif" /></div>
<div><img src="images/web3_07.gif" /></div>
</div>
<!–右側欄目–>
新聞熱點
疑難解答
