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
- 子要素をブロック軸に沿って流し込みます。