CSS3 教程
CSS3 box-flex 屬性
實(shí)例
定義兩個(gè)靈活的p元素。如果父級(jí)box的總寬度為300px，＃P1將有一個(gè)100px的寬度，＃P2將有一個(gè)200px的寬度：
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;
}
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;
}
運(yùn)行代碼 ?
瀏覽器支持
目前主流瀏覽器不支持 box-flex 屬性。
Internet Explorer 10 通過私有屬性 the -ms-flex 支持.
Firefox通過私有屬性 -moz-box-flex 支持.
Safari和Chrome通過私有屬性 -webkit-box-flex 支持.
注意： Internet Explorer 9及更早IE版本不支持彈性框.
屬性定義及使用說明
box-flex屬性指定box的子元素是否靈活或固定的大小。
提示: 隨著box收縮和增長(zhǎng)，元素是否靈活的收縮或增長(zhǎng)。每當(dāng)有額外的空間，在box里，元素靈活的擴(kuò)大來填補(bǔ)這一空間。
| 默認(rèn)值: | 0.0(表示該元素是不靈活的) |
|---|---|
| 繼承: | no |
| 版本: | CSS3 |
| JavaScript 語法: | object.style.boxFlex=2.0 |
語法
box-flex: value;
| 值 | 描述 |
|---|---|
| value | 元素的靈活性。所有Flex都是相對(duì)的 |