編程教程CSS3 box-flex 屬性
CSS3box-flex屬性
實例
定義兩個靈活的p元素。如果父級box的總寬度為300px，＃P1將有一個100px的寬度，＃P2將有一個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;
}
瀏覽器支持
目前主流瀏覽器不支持 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收縮和增長，元素是否靈活的收縮或增長。每當有額外的空間，在box里，元素靈活的擴大來填補這一空間。
| 默認值: | 0.0(表示該元素是不靈活的) |
|---|---|
| 繼承: | no |
| 版本: | CSS3 |
| JavaScript 語法: | object.style.boxFlex=2.0 |
語法
box-flex:value;
| 值 | 描述 |
|---|---|
| value | 元素的靈活性。所有Flex都是相對的 |