<div class="box">  
<div class="col_1">111</div>  
<div class="col_2">222</div>  
<div class="col_3">333</div>  
</div>  
<style type="text/css">  
.box {  
display:box;  
display:-webkit-box;  
display:-moz-box;  
background-color:#fff;  
width:500px;  
height:100px;  
border:1px solid #333;  
margin:0 auto;  
}  
.col_1 {  
box-flex:1;  
-moz-box-flex:1;  
-webkit-box-flex:1;  
background-color:#ffc;  
}  
.col_2 {  
background-color:#ccf;  
box-flex:2;  
-moz-box-flex:2;  
-webkit-box-flex:2;  
}  
.col_3 {  
background-color:#fcf;  
box-flex:2;  
-moz-box-flex:2;  
-webkit-box-flex:2;  
}  
</style>

注意：
父容器必須定義為display:box，其子容器才可以進(jìn)行劃分（如果定了display:box則該容器為內(nèi)聯(lián)元素，使用margin:0 auto讓其居中在firefox下無(wú)效，需要通過(guò)父容器的text-align:center;來(lái)控制。但在chrome下是可以的）
上面所講到的例子中，三個(gè)子塊分別設(shè)置了1、2、2,也就是把這個(gè)父容器分成5份，分別占據(jù)了父結(jié)構(gòu)寬度的1/5(100px)、2/5(200px)、2/5(200px)。
以上是按比例數(shù)來(lái)進(jìn)行劃分的，如果其中一個(gè)或多個(gè)子容器設(shè)置了固定寬度，其它子容器沒(méi)有設(shè)置，那么設(shè)置寬度的按寬度來(lái)算，剩下的部分再按上面的方法來(lái)計(jì)算。

.col_3 {  
background-color:#fcf;  
width:50px;/*設(shè)置寬度為50px*/ 
}  

當(dāng)子容器中需要有間隔的時(shí)候，他們平分的寬度需要減去中間的margin，然后再按比例平分。

二、box屬性
上面講到的是如何將box-flex如何對(duì)父容器的寬度進(jìn)行劃分，現(xiàn)在來(lái)說(shuō)一下父容器里面的box屬性包括哪些。
box-orient, box-direction, box-align, box-pack, box-lines
1、box-orient
box-orient用來(lái)確定父容器里子容器的排列方式是水平還是垂直，可選屬性如下：
horizontal | vertical | inline-axis | block-axis | inherit
horizontal和inline-axis屬性其效果表現(xiàn)一致，都可以將容器水平排列，在默認(rèn)情況下也呈現(xiàn)水平排列的樣式。當(dāng)父容器設(shè)置高度時(shí)，在firefox下面其子容器的高度無(wú)效，但chroma下面則有效。

如果你容器不設(shè)置高度，子容器的高度值才生效，在firefox下面他們的高度取其中的最大值。而chrome下面設(shè)置高度的子容器為自己的高度，未設(shè)置的其高度和最大值的高度一樣，其實(shí)就是和父容器的高度一致。

vertical和block-axis屬性效果表現(xiàn)一致，都可將子容器垂直排列。他們是對(duì)父容器的高度進(jìn)行分配。如果子容器設(shè)置了寬度，也是谷歌下面有效，火狐無(wú)效，其它都與horizontal表現(xiàn)一致。

2、box-direction
box-direction用來(lái)確定父容器里面的子容器排列順序，具有以下屬性：
normal | reverse | inherit
normal是默認(rèn)值，如上面測(cè)試結(jié)果。
reverse表示反轉(zhuǎn)，其表現(xiàn)方式跟normal相反，呈現(xiàn)為3、2、1

 

3、box-align
box-align表示父容器里面子容器的垂直對(duì)齊方式，屬性值為：
start | end | center | baseline | stretch
start、baseline展示效果

 

end展示效果



 

center展示效果

 

stretch展示效果，（谷歌下面如start）

4、box-pack
box-pack表示父容器里面子容器的水平對(duì)齊方式，可選參數(shù)如下所示：
start | end | center | justify
css代碼

start：在box-pack表示水平居左對(duì)齊，如下所示：

end：在box-pack表示水平居右對(duì)齊，如下圖所示

center：在box-pack表示水平居中對(duì)齊，如下圖所示

justify：在box-pack表示兩邊對(duì)齊試
 

box-flex的值為至少為1的整數(shù)時(shí)起作用。但是，僅僅一個(gè)box-flex屬性是不足以實(shí)現(xiàn)子元素間的空間分配，因?yàn)檫€要看其老爸的意思。只有老爸開(kāi)口說(shuō)：“這個(gè)房子現(xiàn)在你們隨意分配。”其子女才能分配。

所以，父元素也是需要添加必要的聲明的。此聲明就是：

#father { display: box; }

似乎也可以是：

#father { display: inline-box; }

此聲明好像是在說(shuō)：孩子們，現(xiàn)在我把這個(gè)房子變成了可隨意分配狀態(tài)，非固定財(cái)產(chǎn)，你們可以自己協(xié)商分配了。
display: box;的聲明其實(shí)就是彈性盒子模型的聲明，此聲明下的子元素的行為與表現(xiàn)與CSS2中的傳統(tǒng)盒子模型的表現(xiàn)是有顯著的差異的。

畢竟屬于CSS3的東西，目前而言，僅Firefox/Chrome/Safari瀏覽器支持彈性盒子模型（IE9不詳，Opera尚未），且使用的時(shí)候，需要附帶私有前綴。就是諸如-moz-, -webkit-之類。

CSS實(shí)例
現(xiàn)在把上面的馬林分房子的例子CSS實(shí)例化，看看在web頁(yè)面上是個(gè)如何的表現(xiàn)：

主要CSS代碼如下：

.test_box {
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
    
    ...
 }
.list {
   ...
}
.list_one {
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;
}
.list_two{
    -moz-box-flex: 2; 
    -webkit-box-flex: 2; 
    box-flex: 2;
}

HTML代碼如下：

<div class="test_box">
    <div class="list list_two">1</div>
    <div class="list list_one">2</div>
    <div class="list list_one">3</div>
</div>

彈性盒子模型下的爸爸（父標(biāo)簽）其實(shí)是很有貨的，男人嘛，就應(yīng)該這樣，夠沉穩(wěn)夠內(nèi)涵。
爸爸肚子中的貨有：box-orient, box-direction, box-align, box-pack, box-lines. 現(xiàn)在依次講講這里box打頭的屬性都是干嘛用的。

box-orient
box-orient用來(lái)確定子元素的方向。是橫著排還是豎著走。可選的值有：

horizontal | vertical | inline-axis | block-axis | inherit

其中，inline-axis是默認(rèn)值。且horizontal與inline-axis的表現(xiàn)似乎一致的，讓子元素橫排；而vertical與block-axis的表現(xiàn)也是一致的，讓元素縱列。

切換demo頁(yè)面左邊的單選選項(xiàng)卡（如果您的瀏覽器為Firefox/Chrome/Safari），就可以看到不同的box-orient屬性值的行為表現(xiàn)了。//zxx:對(duì)比可以發(fā)現(xiàn)，F(xiàn)irefox下的display:box會(huì)收縮外框（有點(diǎn)display:inline-block的感覺(jué)），而Chrome則沒(méi)有收縮。

box-direction
box-direction是用來(lái)確定子元素的排列順序，可選值有：

normal | reverse | inherit

其中normal是默認(rèn)值，表示按照正常順序排列。所謂正常順序，就是我們看書(shū)寫(xiě)文字的順序，從左往右，由上至下，先出現(xiàn)的元素，就上面或是左邊。而reverse表示反轉(zhuǎn)，原本從左往右應(yīng)該是1-2-3的，結(jié)果顯示確實(shí)3-2-1。

例如我們將此屬性應(yīng)用在我們一開(kāi)始的分配房子的demo上的話，最后的顯示就會(huì)如下縮略圖——順序反過(guò)來(lái)的：

相關(guān)CSS代碼如下：

.test_box {
    display: -moz-box; 
    display: -webkit-box; 
    display: box;
    
    -moz-box-direction:reverse;
    -webkit-box-direction:reverse;
    box-direction:reverse;
    
    ...
 }

box-align
box-align與box-pack都是決定盒子內(nèi)部剩余空間怎么使用的。在行為效果上就是表現(xiàn)為“對(duì)齊”，這跟Adobe的軟件中的一些“對(duì)齊”是一致的，例如化妝大師photoshop中的圖層-對(duì)齊：

其中box-align決定了垂直方向上的空間利用，也就是垂直方向上的對(duì)齊表現(xiàn)。為了便于記憶，我們可以拿來(lái)和CSS2中的vertical-align隱射記憶，兩者都有”align”，都是都是垂直方向的對(duì)齊；而剩下的box-pack就是水平方向的了。

box的可選參數(shù)有：

start | end | center | baseline | stretch

其中stretch為默認(rèn)值，為拉伸，也就是父標(biāo)簽高度過(guò)高，其孩子元素的高度就多高，//zxx:以后等高布局不用愁了。start表示頂邊對(duì)齊，end為底部對(duì)齊，center為居中對(duì)齊，baseline表示基線（英文字母o,m,n等的底邊位置線）對(duì)齊。

點(diǎn)擊demo左邊的單選按鈕組，即可查看各個(gè)屬性值的效果。

例如，選中”center”這個(gè)單選按鈕，結(jié)果右側(cè)的顯示如下面的截圖：



 

其他各個(gè)屬性值的效果您可以自己點(diǎn)擊查看（非IE瀏覽器），這里就不一一展示效果截圖了。

box-pack
box-pack決定了父標(biāo)簽水平遺留空間的使用，其可選值有：

start | end | center | justify

就大部分的行為表現(xiàn)來(lái)說(shuō)分別對(duì)應(yīng)text-align屬性的值：left | right | center | justify；但是，之所以box-pack不使用”left”, 而是”start”，是因?yàn)閎ox-direction屬性，這玩意可以反轉(zhuǎn)原本的排列，原本的“左對(duì)齊”反轉(zhuǎn)后結(jié)果是“右對(duì)齊”了，此時(shí)”left”顯然就詞不達(dá)意了，所以使用”start”更具有概括性，就是與父標(biāo)簽的起始位置對(duì)齊，從而不會(huì)產(chǎn)生語(yǔ)義與行為上的困擾。

其中”start”是box-pack屬性的默認(rèn)值，justify表示兩端對(duì)齊。

為了方便直觀的查看各個(gè)屬性值的效果，我制作了與上面類似風(fēng)格的demo，您可以狠狠地點(diǎn)擊這里：box-pack屬性值效果demo

下為選中end的界面截圖縮略圖：

貌似發(fā)現(xiàn)在Firefox瀏覽器下，justify是沒(méi)有反應(yīng)的，可能還未支持。Chrome瀏覽器表現(xiàn)良好。

box-lines
box-lines是用來(lái)決定子元素是可以換行顯示呢？還是就算擠出油還是單行顯示。兩個(gè)可選值：

single | multiple

其中single是默認(rèn)值，表示死活不換行，如下圖所示：

設(shè)置box-lines:multiple后，就多行顯示了。不過(guò)我自己測(cè)試了下，貌似現(xiàn)在無(wú)論是Firefox瀏覽器還是Chrome都不認(rèn)識(shí)box-lines:multiple屬性，是暫不支持呢，還是什么什么？

五、兩個(gè)遺漏的屬性

子元素除了box-flex屬性，還有兩個(gè)屬性，box-flex-group和box-ordinal-group，其中box-flex-group的作用不詳，貌似目前瀏覽器也不支持；box-ordinal-group的作用是拉幫結(jié)派。還是上面馬林大叔分房子的例子。小馬女友阿鳳又不消停，眼瞅著大馬的房子面積比自己大好多，心里不平衡，于是，就去拉攏中馬，一起打大馬房子的主意。這個(gè)“拉攏”就是這里的box-ordinal-group，拉攏的組織團(tuán)伙是有一個(gè)數(shù)字級(jí)別的，決定了你這個(gè)組織的位置。

數(shù)值越小，位置就越靠前，這不難理解，第一組在最前嘛，隨后第二組，第三組… 例如：box-ordinal-group:1的組就會(huì)在box-ordinal-group:2的組前面顯示。于是，我們可以利用這個(gè)屬性改變子元素的順序。例如下面這個(gè)例子：
HTML代碼如下：

<div class="test_box">
    <div class="list list_two">1</div>
    <div class="list list_one">2</div>
    <div class="list list_one">3</div>
</div>

相關(guān)CSS如下：

.list_one {
    ...

    -moz-box-ordinal-group: 1; 
    -webkit-box-ordinal-group: 1; 
    box-ordinal-group: 1;
}
.list_two{
    ...

    -moz-box-ordinal-group: 2; 
    -webkit-box-ordinal-group: 2; 
    box-ordinal-group: 2;
}

結(jié)果后面兩個(gè)class為”list_one”的元素跑到前面去了。如下圖所示：

六、實(shí)際點(diǎn)的應(yīng)用

如果您現(xiàn)在瀏覽器地址欄中的地址中含有”www.zhangxinxu.com”字樣，并且瀏覽器為較新的Firefox/Chrome/Safari瀏覽器，那么您就可以在本頁(yè)面上找到我做的應(yīng)用。

咔咔，我就不賣(mài)賣(mài)關(guān)子了，我改變了相關(guān)文章某一處的顯示順序，就是隨機(jī)文章。

但是在本文所在的頁(yè)面上，隨機(jī)文章第一個(gè)顯示了（由于贊不支持換行，故垂直顯示了）。

相關(guān)CSS代碼如下：

.similarity ul{display:-moz-box; display:-webkit-box; display:box; -moz-box-orient:vertical; -webkit-box-orient:vertical; -o-box-orient:vertical; box-orient:vertical; }
.similarity ul li{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; -moz-box-ordinal-group:2; -webkit-box-ordinal-group:2; box-ordinal-group:2;}
.similarity ul li:last-child{-moz-box-ordinal-group:1; -webkit-box-ordinal-group:1; box-ordinal-group:1; }

• CSS3
• css
• 布局