關於 css中box屬性

CSS box-flex屬性，而後彈性盒子模型簡介

這篇文章發佈於 2010年12月19日，星期日，17:10，歸類於 css相關。 閱讀 187777 次, 今日 8 次

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1338

1、淡淡的開頭語

昨天趁着不想工做的時間間隙閒逛24ways，在My CSS Wish List一文中，見到了個新鮮的CSS屬性，就是題目中的box-flex，之前沒有見過，頓生疑惑，不知是騾子仍是馬，因而習慣性谷歌之，真是不穀不知道，一谷嚇一跳。倒不是該屬性自己，而是此屬性做爲導火索，讓我瞭解了下CSS3中新的盒子模型——彈性盒子模型(Flexible Box Model)。對於我這樣的流體佈局控而言，這種盒子模型的出現就比如打麻將槓上開花槓到絕張邊七條，讓人興奮不已。在國外，彈性盒子模型早在去年就開始被說起，研究，與應用。然而，本身如今才第一次聽到此概念，真是一不留神就out了，學習這東西，果真鬆懈不得。

本文內容敘述撇開以往順流而下的方式，直接以box-flex屬性爲切入口，直入大本營，再鋪開敘述。

添加於2014-11-30：本文已老，僅供參考。

2、box-flex屬性（和諧版）

有道桌面詞典顯示，」flex」一詞中文有「收縮」之意。不過，今後屬性實際上產生的效果來看，不管怎樣用「收縮」一詞解釋都顯得很牽強。因此，這裏，直接拋開字面意思，咱們能夠將」box-flex」理解爲」房子-分配」。box爲「盒子」的意思，咱們能夠理解爲當下價格巨高的「房子」，」flex」指兄弟幾個「分配房子」。

舉個更實際點的例子：馬林大叔省吃儉用一生，終於在上海郊外買了間150平米的商品房。後來，馬林大叔想回老家養老，決定把房子分配給他的三個兒子。ok，先暫停下，這裏提到的「房子」就是」box-flex」中的」box」，「分配」就是」box-flex」中的」flex」，因而，這個「分配房子」的舉動就稱爲」box-flex」，而box-flex屬性的值就是說的如何分配，分配比例是什麼。oK，繼續咱們的例子，馬林大叔的三個兒子分別叫作大馬，中馬和小馬，其中大馬已經結婚多年，有一堆雙胞胎女兒，拖家帶口的人多；而中馬和小馬是優秀的光棍人士。因此，大馬要求分配更多的房子，最終，家人一番協商有了下面的分配結果，就是：

#大馬 { 房子-分配: 2; }
#中馬 { 房子-分配: 1; }
#小馬 { 房子-分配: 1; }

我想，上面的分配應該很容易看懂的。房子分紅了總共4份，其中有家室的大馬分得其中的兩份，而爲國家省橡膠的中馬和小馬每人分得其中一份，因而用數值換算就是：
大馬 = 150 * (2 / (2+1+1)) = 75（平米）;
中馬 = 150 * (1 / (2+1+1)) = 37.5（平米）;
小馬 = 150 * (1 / (2+1+1)) = 37.5（平米）;

若是裝換成CSS表示就是：

#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { box-flex: 1; }

哇咔咔，box-flex的含義與做用理解瞬間柳暗花明：用來按比例分配父標籤的寬度(或高度)空間。

box-flex的值爲至少爲1的整數時起做用。可是，僅僅一個box-flex屬性是不足以實現子元素間的空間分配，由於還要看其老爸的意思。所謂，我爸是李剛，撞人很囂張；恨爸不是剛，撞人心慌慌。只有老爸開口說：「這個房子如今大家隨意分配。」其子女才能分配。

因此，父元素也是須要添加必要的聲明的。此聲明就是：

#father { display: box; }

彷佛也能夠是：

#father { display: inline-box; }

此聲明好像是在說：孩子們，如今我把這個房子變成了可隨意分配狀態，非固定財產，大家能夠本身協商分配了。
display: box;的聲明其實就是彈性盒子模型的聲明，此聲明下的子元素的行爲與表現與CSS2中的傳統盒子模型的表現是有顯著的差別的。

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

CSS實例
如今把上面的馬林分房子的例子CSS實例化，看看在web頁面上是個如何的表現：//zxx:有把小說拍成電影的感受，

主要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>

結果以下縮略圖：

從上圖能夠看去，老大大馬確實分配到了2份的房子空間，而中馬和小馬均分到了一份房子空間。

您能夠狠狠地點擊這裏：box-flex彈性佈局測試demo

3、CSS box-flex屬性（不和諧版）

繼續上面馬林大叔分房的例子。本來兄弟三人和和氣睦是一點問題都沒有的，房子怎麼分也基本都定下來了。然而，忽然，事情起了波瀾。老三小馬忽然有了個彪悍的女友，叫阿鳳。小馬本人對分配房子的大小是以爲無所謂的，即便兩我的住，近40平米的屋子也足夠了，何須爲了這點事情傷了兄弟們間的和睦。然而，小馬的女朋友阿鳳倒是個吃不了虧的人，說什麼也要爭口氣，因而，找來大馬中馬，強烈要求要加大他們房子的分配面積。

在大馬，中馬看來，阿鳳還屬於外來人，憑什麼對他們兄弟的房子指手劃腳，因而，沒得妥協，因而，爭執不斷，因而，愈演愈烈，因而，不可開交。因而，有天，阿鳳實在憋不住了，在廚房作菜的時候忽然拿着菜刀跑出來，大聲咆哮：「無論怎樣，反正我家小馬至少要50平米的房子，其他的怎麼分是大家的事情，我無論，這是個人底線了，再低就沒得商量！！」大馬等被這架勢嚇住了，最終仍是妥協了：小馬就50平米（即便之後房子擴建仍是50平米），剩下的面積大馬，中馬2:1比例再分配。因而就有：

#大馬 { 房子-分配: 2; }
#中馬 { 房子-分配: 1; }
#小馬 { 房子-分配: 50m2; }

改編成CSS劇本就是：

#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { width: 50px; }

仍是不難理解，當子元素中有寬度值的時候，此元素就定寬處理，剩下的空間再按比例分配。
因而，此時，大馬的房子大小是：(150 – 50) * (2 / (1 + 2)) = 66.7平米，中馬分配房子大小是：(150 – 50) * (1 / (1 + 2)) = 33.3平米。

仍是相似上面的demo，看看含有定寬元素的子元素是如何表現的。

新增CSS樣式以下：

.list_w300 { width: 300px; }

HTML代碼以下：

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

結果以下縮略圖：

老三分得300像素的寬度，剩下的500像素寬度老大和老二2:1比例分配。

您能夠狠狠地點擊這裏：含定寬元素彈性佈局demo

然而，事情尚未結束。兄弟幾個相處了一段時間後發現，偌大的屋子若是所有都是私有的話，會有諸多生活上的不便。因此，須要騰出些公共空間，給屋子透個氣。咋辦呢，老三小馬的女朋友阿鳳死活不妥協，沒有辦法，老馬和中馬只能犧牲本身的住所面積做爲公共空間了。

反應到CSS上，大體就是增長了margin間距，以下HTML：

<div class="test_box">
    <div class="list list_two">1</div>
    <div class="list list_one" style="margin:0 30px;">2</div>
    <div class="list list_w300">3</div>
</div>

結果以下縮略圖：

老大，老二的空間同時被壓榨了，老大還好，本來比例高。只是可憐了二當家的，地方愈來愈小。不過，老二的隱忍換來了和氣，所作的犧牲沒有白費。

4、爸爸其實很厲害，的說~

語言小知識：「厲害」用日語說的話，動漫裏面常常用的比較文雅的就是「すごい」，如今年輕人經常使用的就是「スゲ」，還有一種說法「よくできるね」是一種稱讚的說法，語氣比較柔和。

彈性盒子模型下的爸爸（父標籤）實際上是頗有貨的，男人嘛，就應該這樣，夠沉穩夠內涵。
爸爸肚子中的貨有：box-orient, box-direction, box-align, box-pack, box-lines. 如今依次講講這裏box打頭的屬性都是幹嗎用的。

box-orient
box-orient用來肯定子元素的方向。是橫着排仍是豎着走。可選的值有：

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

其中，inline-axis是默認值。且horizontal與inline-axis的表現彷佛一致的，讓子元素橫排；而vertical與block-axis的表現也是一致的，讓元素縱列。

我專門作了個demo頁面，方便您查看各個值的行爲與表現。您能夠狠狠地點擊這裏：box-orient值做用測試頁面

切換demo頁面左邊的單選選項卡（若是您的瀏覽器爲Firefox/Chrome/Safari），就能夠看到不一樣的box-orient屬性值的行爲表現了。//zxx:對比能夠發現，Firefox下的display:box會收縮外框（有點display:inline-block的感受），而Chrome則沒有收縮。

box-direction
box-direction是用來肯定子元素的排列順序，可選值有：

normal | reverse | inherit

其中normal是默認值，表示按照正常順序排列。所謂正常順序，就是咱們看書寫文字的順序，從左往右，由上至下，先出現的元素，就上面或是左邊。而reverse表示反轉，本來從左往右應該是1-2-3的，結果顯示確實3-2-1。

例如咱們將此屬性應用在咱們一開始的分配房子的demo上的話，最後的顯示就會以下縮略圖——順序反過來的：

相關CSS代碼以下：

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

您能夠狠狠地點擊這裏：列表順序反轉顯示demo

box-align
box-align與box-pack都是決定盒子內部剩餘空間怎麼使用的。在行爲效果上就是表現爲「對齊」，這跟Adobe的軟件中的一些「對齊」是一致的，例如化妝大師photoshop中的圖層-對齊：

其中box-align決定了垂直方向上的空間利用，也就是垂直方向上的對齊表現。爲了便於記憶，咱們能夠拿來和CSS2中的vertical-align隱射記憶，二者都有」align」，都是都是垂直方向的對齊；而剩下的box-pack就是水平方向的了。

box的可選參數有：

start | end | center | baseline | stretch

其中stretch爲默認值，爲拉伸，也就是父標籤高度太高，其孩子元素的高度就多高，//zxx:之後等高佈局不用愁了。start表示頂邊對齊，end爲底部對齊，center爲居中對齊，baseline表示基線（英文字母o,m,n等的底邊位置線）對齊。

爲了直觀的知道各個值的效果，我作了個可實時查看效果的demo，您能夠狠狠地點擊這裏：css box-align各值效果demo

點擊demo左邊的單選按鈕組，便可查看各個屬性值的效果。

例如，選中」center」這個單選按鈕，結果右側的顯示以下面的截圖：

其餘各個屬性值的效果您能夠本身點擊查看（非IE瀏覽器），這裏就不一一展現效果截圖了。

box-pack
box-pack決定了父標籤水平遺留空間的使用，其可選值有：

start | end | center | justify

就大部分的行爲表現來講分別對應text-align屬性的值：left | right | center | justify；可是，之因此box-pack不使用」left」, 而是」start」，是由於box-direction屬性，這玩意能夠反轉本來的排列，本來的「左對齊」反轉後結果是「右對齊」了，此時」left」顯然就詞不達意了，因此使用」start」更具備歸納性，就是與父標籤的起始位置對齊，從而不會產生語義與行爲上的困擾。

其中」start」是box-pack屬性的默認值，justify表示兩端對齊。

爲了方便直觀的查看各個屬性值的效果，我製做了與上面相似風格的demo，您能夠狠狠地點擊這裏：box-pack屬性值效果demo

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

貌似發如今Firefox瀏覽器下，justify是沒有反應的，可能還未支持。Chrome瀏覽器表現良好。

box-lines
box-lines是用來決定子元素是能夠換行顯示呢？仍是就算擠出油仍是單行顯示。兩個可選值：

single | multiple

其中single是默認值，表示死活不換行，以下圖所示：

設置box-lines:multiple後，就多行顯示了。不過我本身測試了下，貌似如今不管是Firefox瀏覽器仍是Chrome都不認識box-lines:multiple屬性，是暫不支持呢，仍是什麼什麼？

您能夠狠狠地點擊這裏：看不到換行效果的demo

5、兩個遺漏的屬性

子元素除了box-flex屬性，還有兩個屬性，box-flex-group和box-ordinal-group，其中box-flex-group的做用不詳，貌似目前瀏覽器也不支持；box-ordinal-group的做用是拉幫結派。仍是上面馬林大叔分房子的例子。小馬女朋友阿鳳又不消停，眼瞅着大馬的房子面積比本身大好多，內心不平衡，因而，就去拉攏中馬，一塊兒打大馬房子的主意。這個「拉攏」就是這裏的box-ordinal-group，拉攏的組織團伙是有一個數字級別的，決定了你這個組織的位置。

數值越小，位置就越靠前，這不難理解，第一組在最前嘛，隨後第二組，第三組… 例如：box-ordinal-group:1的組就會在box-ordinal-group: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>

相關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;
}

結果後面兩個class爲」list_one」的元素跑到前面去了。以下圖所示：

您能夠狠狠地點擊這裏：box-ordinal-group分組改序demo

6、實際點的應用

若是您如今瀏覽器地址欄中的地址中含有」www.zhangxinxu.com」字樣，而且瀏覽器爲較新的Firefox/Chrome/Safari瀏覽器，那麼您就能夠在本頁面上找到我作的應用。

咔咔，我就不賣賣關子了，我改變了相關文章某一處的顯示順序，就是隨機文章。

可是在本文所在的頁面上，隨機文章第一個顯示了（因爲贊不支持換行，故垂直顯示了）。

相關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; }