我們經常會遇到的，在各種選項卡上，要求選項卡標籤是等寬，並平均分配父容器的寬度。
這個時候，通常我們使用百分比來設定各選項卡的寬度。
但是，你會遇到各種不同數量的選項卡，你只能分別為這些選項卡設定不同的百分比寬度，還要為3、6、7 這樣不能被100整除的數量的選項卡做特殊的設定。
而使用 css3 box-flex 就會很簡單：將父容器設定為 display: -webkit-box，然後給子容器設定乙個寬度，比如 width:0，並設定 -webkit-box-flex: 1，那麼它們將平均分配父容器的寬度
經測試，box-flex 對表單元素元素無效，此時，你可以在表單元素外新增乙個標籤，然後將設定表單元素的尺寸為 100%。
有了 box-flex，在大部分使用 float 的場景，你可以不再使用以下屬性：
float
margin
vertical-align
width: 50%...
我們來看一下 display 為 box 的容器內的子物件除了 box-flex 外還可以使用的好東西（從網上搜刮而來）：
box-orient
box-orient用來確定子元素的方向。是橫著排還是豎著走。可選的值有：
horizontal | vertical | inline-axis（預設） | block-axis | inherit
box-direction
box-direction是用來確定子元素的排列順序，可選值有：
normal（預設） | reverse | inherit
box-align
box-align決定了垂直方向上的空間利用，也就是垂直方向上的對齊表現。為了便於記憶，我們可以拿來和css2中的vertical-align隱射記憶，兩者都有」align」，都是都是垂直方向的對齊；而剩下的box-pack就是水平方向的了。
box的可選引數有：
start | end | center | baseline | stretch（預設）
box-pack
box-pack決定了父標籤水平遺留空間的使用，其可選值有：
start（預設） | end | center | justify
box-lines
box-lines是用來決定子元素是可以換行顯示呢？還是就算擠出油還是單行顯示。兩個可選值：
single | multiple
其中single是預設值，表示死活不換行
子元素除了box-flex屬性，還有兩個屬性，box-flex-group和box-ordinal-group，其中box-flex- group的作用不詳，貌似目前瀏覽器也不支援；box-ordinal-group的作用是拉幫結派；拉攏的組織團夥是有乙個數字級別的，決定了你這個組織的位置。
困擾我們多年的等高布局、垂直居中、左右對齊、尺寸和間距分配……
另外說句，好些功能其實**早就實現了
CSS3彈性盒模型之box flex
對於之前講過的box sizing屬性，對於頁面布局很有用，但是突然發現它依然存在一些問題，前面例子中不會存在問題，不代表它沒有問題。如果元素的個數整除100 的時候呢，比較3個元素，那麼第乙個盒子的寬度就會是33.3333333 很顯然，無論如何都是除不盡的，也就是說不可能平均分配。這顯然是不完美...
例項講解CSS3中的box flex彈性盒屬性布局
box flex是css3新新增的盒子模型屬性，它的出現打破了我們經常使用的浮動布局，實現垂直等高 水平均分 按比例劃分。但是它有一定的侷限性，在firefox chrome這瀏覽器下需要使用它們的私有屬性來定義 firefox moz chrome webkit 一 box flex屬性 box ...
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...