CSS3ボックスフレックスプロパティ
例
2つの可撓性p要素を定義します。 親ボックスの合計幅が300ピクセルである場合、＃P1は＃P2は200pxの幅を持つことになり、100pxに幅を持っています。
#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;
}
»をお試しください
ブラウザのサポート
現在主流のブラウザは、箱フレックスプロパティをサポートしていません。
-ms-flexのサポートによって、Internet Explorerの10私有財産。
私有財産-moz-ボックスフレックスサポートによってFirefoxの。
私有財産-webkit-ボックスフレックスサポートによりSafariやChromeの。
注：IEのInternet Explorer 9の以前のバージョンでは、柔軟性のあるボックスをサポートしていません。
属性の定義と指示
箱-flex属性は、ボックスの子要素は、柔軟または固定サイズであることを指定します。
ヒント：ボックスで縮小し、成長し、要素が柔軟なシュリンクであるかどうか成長します。ボックス内の余分なスペースがあるたびに、柔軟な要素は、スペースを埋めるために展開します。
| デフォルト： | 0.0（要素が柔軟ではないことを示します） |
|---|---|
| 継承： | いいえ |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | オブジェクト.style.boxFlex = 2.0 |
文法
ボックスフレックス：値;
| 値 | 説明 |
|---|---|
| 値 | 可撓性要素。 すべてのFlexは相対的なものです |
