CSS3 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の時点でもまだ未対応のようです。

コメントする


トラックバック

投稿されたコメント