CSS3 Reference


box-ordinal-group

レイアウト順指定

試す

コード

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

サンプル

逆順で表示されていれば正しいです。
※サポートしていないブラウザでは動作しません。

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

対応ブラウザ

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

パラメータ

<整数>
初期値1
適用ボックス要素
継承しない
レベル3
%の解釈-
適用メディアVisual
参考文献Flexible Box Layout Module#3 Display order

解説

子要素のレイアウト順序を指定します。

数字の低いものから順に表示します。

コメントする


トラックバック

投稿されたコメント