本文為大家繼續分享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代碼：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表