CSS3 靈活的盒子模型(Flexible Box Module)-2

繼上一篇《CSS3 靈活的盒子模型(Flexible Box Module)-1》后繼續深入，說說 CSS3 里盒子模型的尺寸。本文的 HTML 框架繼續沿用《CSS3 靈活的盒子模型(Flexible Box Module)-1》。

在 CSS2 里，要把一個容器分成三欄的話比較簡便的方法是把三個字容器的 width 都設為 33.3%，這種方法無法把父容器的寬度完全填充，在父容器的寬度足夠大的時候留下的空白會是頁面變得很不美觀。令一種方法是通過計算把子容器的 width 都設為一個固定值，這種方法比較繁瑣，而且在一些情況下無法使子容器的寬度完全相等（例如父容器的寬度為 100px）。當我們邁入 CSS3 時代后，這種問題將迎刃而解。

box-flex 屬性

box-flex 應用在需要分欄的子容器上，它的值必須是一個自然數或小數。當父容器里有多個帶有 box-flex 屬性的子容器時，瀏覽器將會把這些子容器的 box-flex 的值相加，然后根據它們各自的值占總值的比例，再在父容器剩余的空間里分配它們的尺寸（說的

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈