CSS3 Pre-Reference



box-orient

子要素のレイアウト方法

試す





コード

#containe p {
    display: -webkit-box;
    display: -moz-box;

    box-orient: inline-axis;
    -webkit-box-orient: inline-axis;
    -moz-box-orient: inline-axis;
}

サンプル

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

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

コメントする


対応ブラウザ

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

パラメータ

horizontal | vertical | inline-axis | block-axis | inherit
初期値 inline-axis
適用 ボックス要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 Flexible Box Layout Module#2 Orientation

解説

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

対象はボックス要素、つまり”display:box”の要素です。Firefoxは、現時点ではまだhorizontalとverticalのみ対応しています。

horizontal
子要素を左から右へ流し込みます。
vertical
子要素を上から下へ流し込みます。
inline-axis
子要素をインライン軸に沿って流し込みます。
block-axis
子要素をブロック軸に沿って流し込みます。

 

トラックバック

投稿されたコメント