CSS3 Pre-Reference



box-flex

ボックス柔軟性

試す

コード

#containe {
    display: -webkit-box;
    display: -moz-box;
}
#containe .left {
    box-flex: 3;
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
}
#containe .center {
    box-flex: 2;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
}

サンプル

※サポートしていないブラウザでは動作しません。

左のボックス
真ん中のボックス
二列目
右のボックス
左のボックス
真ん中のボックス
二列目
右のボックス

コメントする


対応ブラウザ

Firefox
Chrome/Safari
3.0~
Opera
まだ
InternetExplorer
まだ

パラメータ

<数値>
初期値 0.0
適用 ボックス要素内のインフロー要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 Flexible Box Layout Module#5 Flexibility

解説

ボックスの柔軟性(フレキシビリティ)を指定します。フレキシビリティとは言いますが、上下左右の余った余白の配分を指定するものです。

余白は要素の幅として配分されます。パディングやボーダー、マージンとしては配分されません。

Firefoxは対応しているような書き方ですが、どうも4.0の時点でもまだ未対応のようです。

トラックバック

投稿されたコメント