對於之前講過的box-sizing屬性，對於頁面布局很有用，但是突然發現它依然存在一些問題，前面例子中不會存在問題，不代表它沒有問題。如果元素的個數整除100%的時候呢，比較3個元素，那麼第乙個盒子的寬度就會是33.3333333%,很顯然，無論如何都是除不盡的，也就是說不可能平均分配。這顯然是不完美的！是否有更完美的解決方案呢，答案是——有，它就是 box-flex.
box-flex是css3新新增的盒子模型屬性，它的出現打破了我們經常使用的浮動布局，實現垂直等高、水平均分、按比例劃分。它使元素實現水平分布，而且不需要使用浮動float屬性就能實現水平布局。
先看**：
.box
.col_1
.col_2
.col_3
想要使用box-flex,其父容器必須定義為display:box,而且對於各瀏覽器必須加上自己私有的字首，因為目前還沒有瀏覽器支援box-flex屬性。容器定子display:box則該容器為內聯元素。
上例中把父容器分成了5份，三個子元素分別為1，2，2，即box-flex的值就是它所佔的等份。那麼，col_1為500px*(1/5)=100px,col_2和col_3都為500px*(2/5)=200px。那如果其中乙個元素設定了固定的寬度值又會如何呢？如：col_3,那麼設定了固定寬度值的元素就是固定的值，其他子元素就把剩下的部分再按上面的方式來進行分配，當子元素有間隔的時候，他們平分的寬度需要減去它們的margin值，然後再按比較分配。
不需要計算百分比，設定等分數就能完美展現想要的！！box-flex絕對是你想要的！！
css3 彈性盒模型
1.box flex 定義盒子的彈性空間 子元素的尺寸 盒子的尺寸 子元素的box flex屬性值 所有子元素的box flex屬性值的和 例題 中間寬度固定，兩側寬度自適應 box div nth of type 1 box div nth of type 2 box div nth of typ...
CSS3彈性盒模型
一.方向和順序 彈性盒子的內容可以以任何方向和順序布局，這使布局更簡單，其功能通過以下幾個屬性實現 1 flex direction 值為row 預設值 row reverse column column reverse，用於控制彈性盒子的內容在主軸上的放置方向。row 與當前的寫模式相同，例如 中...
Css3彈性盒模型
css3引入了新的盒模型 彈性盒模型，該模型決定乙個盒子在其他盒子中的分布方式以及如何處理可用的空間。這與xul 火狐使用的使用者互動語言 相似，其它語言也使用相同的盒模型，如xaml gladexml。使用該模型，可以很輕鬆的建立自適應瀏覽器視窗的流動布局或自適應字型大小的彈性布局。本文的例子使用...