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

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのbox-orient属性の使い方

青灯夜游

May 28, 2019 pm 04:49 PM

css

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。