ホームページ > 記事 > ウェブフロントエンド > CSSのbox-orient属性の使い方
CSSのbox-orient属性の使い方
- 青灯夜游オリジナル
- 2019-05-28 16:49:063301ブラウズ
css box-orient プロパティは、ボックス (box) の子要素を水平に配置するか垂直に配置するかを指定するために使用されます。水平ボックスの子は左から右に表示され、垂直ボックスの子は上から下に表示されます。
CSS の box-orient 属性を使用するにはどうすればよいですか?
box-orient 属性は、ボックスの子要素を水平に配置するか垂直に配置するかを指定します。
構文:
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
属性値:
horizontal: 子要素を水平方向の行に左から右に配置します。
vertical: 子要素を上から下に垂直に配置します。
inline-axis: インライン軸に沿って子要素を配置します (水平方向にマップされます)。
block-axis: 子要素をブロック軸に沿って配置します (垂直方向にマップされます)。
inherit: box-orient 属性の値は親要素から継承される必要があります。
説明: 水平ボックスのサブ要素は左から右に表示され、垂直ボックスのサブ要素は上から下に表示されます。ただし、box-direction と box-ordinal-group はこの順序を変更できます。
注: 現在、すべての主流ブラウザは box-orient 属性をサポートしていません。 Firefox はプライベート プロパティ MOZ-box-orient を通じてこれをサポートしています。 Safari、Opera、および Chrome は、プライベート プロパティ -webkit-box-orient を介してサポートされます。
css ボックス方向プロパティの例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
width: 350px;
height: 150px;
border: 1px solid black;
/* Firefox */
display: -moz-box;
-moz-box-orient: horizontal;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-orient: horizontal;
/* W3C */
display: box;
box-orient: horizontal;
}
</style>
</head>
<body>
<div>
<p>段落 1。</p>
<p>段落 2。</p>
<p>段落 3。</p>
</div>
<p><b>注释：</b>IE 不支持 box-orient 属性。</p>
</body>
</html>以上がCSSのbox-orient属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。