CSS基礎篇--CSS3之box-flex屬性的使用

語法：

box-flex：<number>

其中number取值：使用浮點數指定對象所分配其父元素剩餘空間的比例。
設置或檢索伸縮盒對象的子元素如何分配其剩餘空間。(伸縮盒最老版本)

html代碼：

<ul id="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

css代碼：

#box{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box
    display:box;
    width:240px;
    height:100px;
    margin:0;
    padding:10px;
    list-style:none;
    color:#fff;
}
#box li:nth-child(1){
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -ms-box-flex:1;
    box-flex:1;
    background:#000;
}
#box li:nth-child(2){
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -ms-box-flex:1;
    box-flex:1;
    background:red;
}
#box li:nth-child(3){
    -webkit-box-flex:2;
    -moz-box-flex:2;
    -ms-box-flex:2;
    box-flex:2;
    background: grey;
}

獲得的結果如圖所示:

注：其實上面的css代碼中-ms-box-flex與box-flex能夠省略，爲何這麼說呢，IE6-IE11的瀏覽器不支持box-flex，其它內核的瀏覽器都須要加上前綴如-webkit-，-moz-瀏覽器才解析這個屬性。這兒寫上是爲告訴你們，爲了讓css3屬性兼容，通常都這麼寫完整而已。下面會說一下瀏覽器的兼容。

誤區：注意box-flex只是動態分配父元素的剩餘空間，而不是整個父元素的空間。如上例，父元素#box的寬度爲240px，若是你認爲a,b,c的寬度分別爲60, 60, 120那麼就錯了，由於box-flex只是分配父元素的剩餘空間而已，因此a,b,c所分到的應該是除內容外所剩餘下來的寬度

爲了清晰所謂的剩餘空間分配，對上例稍做修改，HTML Code不變
css代碼：

#box{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box
    display:box;
    width:240px;
    height:100px;
    margin:0;
    padding:10px;
    list-style:none;
    color:#fff;
}
#box li{
    width:50px;
    padding:7px;
}
#box li:nth-child(1){
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -ms-box-flex:1;
    box-flex:1;
    background:#000;
}
#box li:nth-child(2){
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -ms-box-flex:1;
    box-flex:1;
    background:red;
}
#box li:nth-child(3){
    -webkit-box-flex:2;
    -moz-box-flex:2;
    -ms-box-flex:2;
    box-flex:2;
    background: grey;
}

結果如圖所示：

從上面的代碼，咱們能夠知道a,b,c的寬度分別爲50+7*2=64px，三者加起來即192px，因此剩下的240-192=48px纔是父元素的剩餘空間，因而a,b,c按照設定的1:1:2來分配這48px，a分得12px，b分得12px，c分得24px，因此最終a=64+12=76px，b=64+12=76px，c=64+24=88px

由上面的代碼引入了一個思考，若是我沒有給li設置寬度，而且當子元素的內容過多，會出現什麼問題，那就是設置的box-flex會被撐開，根據上面來寫個例子，以下：
css代碼：

#box{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box
    display:box;
    width:240px;
    height:100px;
    margin:0;
    padding:10px;
    list-style:none;
    color:#fff;
}
#box li{
    padding:7px;
}
#box li:nth-child(1){
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -ms-box-flex:1;
    box-flex:1;
    background:#000;
}
#box li:nth-child(2){
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -ms-box-flex:1;
    box-flex:1;
    background:red;
}
#box li:nth-child(3){
    -webkit-box-flex:2;
    -moz-box-flex:2;
    -ms-box-flex:2;
    box-flex:2;
    background: grey;
}

html代碼：

<ul id="box">
    <li>這個內容過多怎麼辦？有問題沒有？</li>
    <li>b</li>
    <li>c</li>
</ul>

結果如圖所示：

那要怎麼解決呢？
就是給li添加一個width:1%,代碼以下：

#box li{
    width:1%;
    padding:7px;
}

或者width:1px也是能夠的。結果如圖所示:

兼容性如圖所示：

參考地址：http://www.css88.com/book/css...

最後說明下：

1. display:box,是2009的flexbox版本
2. display:flexbox,或者函數flex()，是2011年發佈的
3. display:flex,是目前正在使用的2012年發佈的標準