CSSのbox-orient属性の使い方-CSSチュートリアル-php.cn

CSSのbox-orient属性の使い方

青灯夜游

リリース： 2019-05-28 16:49:06

オリジナル

3371 人が閲覧しました

css box-orient プロパティは、ボックス (box) の子要素を水平に配置するか垂直に配置するかを指定するために使用されます。水平ボックスの子は左から右に表示され、垂直ボックスの子は上から下に表示されます。

CSSのbox-orient属性の使い方

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 サイトの他の関連記事を参照してください。