CSSのalign-items属性の使い方は？-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのalign-items属性の使い方は？

青灯夜游

Feb 16, 2019 am 10:21 AM

css

css の align-items 属性は、float コンテナ内の項目の水平軸方向の配置を指定するために使用されます。その構文は、「align-items:stretch|center|flex-start|flex-end|baseline」です。 ;」。

CSSのalign-items属性の使い方は？

css align-items プロパティは、Float コンテナ内の項目の水平軸方向の配置を指定するために使用されます。コンテナを中心に、コンテナを満たすように引き伸ばします。水平軸、上部で垂直に整列し、下部で垂直に整列し、水平軸のベースラインで整列します。 [ビデオチュートリアルの推奨: CSS チュートリアル]

CSS align-items 属性

align-items 属性はフレキシブルボックスですレイアウトモジュールのサブプロパティ。

関数: 現在の行の水平軸に沿って柔軟な項目を配置する方法のデフォルト (配置) 動作を定義します。

注: Float コンテナ内の各サブ項目で align-self 属性を使用して、align-items 属性のスタイルをオーバーライドできます。

構文:

align-items: stretch|center|flex-start|flex-end|baseline;

stretch (デフォルト): コンテナーを満たすようにストレッチします (min-width/max-width を考慮します)。

CSSのalign-items属性の使い方は？

center: 項目は水平軸の中央に配置されます。デフォルトでは、水平軸は垂直方向です。つまり、フレックスボックス項目は垂直方向の中央に配置されます。

CSSのalign-items属性の使い方は？

flex-start: 項目は水平軸の開始位置に配置されます。つまり、項目は上部に垂直方向に配置されます。

CSSのalign-items属性の使い方は？

flex-end: 項目は水平軸の端に整列されます。つまり、項目は垂直方向に下に整列されます。

CSSのalign-items属性の使い方は？

baseline: 項目は水平軸のベースラインに配置されます。つまり、テキストのベースラインが水平線に沿って配置されるように、フレックスボックス項目自体が配置されます。

CSSのalign-items属性の使い方は？

#CSS align-items 属性の使用例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			.flex-container {
				padding: 0;
				margin: 0;
				list-style: none;
				-ms-box-orient: horizontal;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -moz-flex;
				display: -webkit-flex;
				display: flex;
				float: left;
			}
			
			.flex-start {
				-webkit-align-items: flex-start;
				align-items: flex-start;
			}
			
			.flex-end {
				-webkit-align-items: flex-end;
				align-items: flex-end;
			}
			
			.flex-end li {
				background: gold;
			}
			
			.center {
				-webkit-align-items: center;
				align-items: center;
			}
			
			.center li {
				background: deepskyblue;
			}
			
			.baseline {
				-webkit-align-items: baseline;
				align-items: baseline;
			}
			
			.baseline li {
				background: lightgreen;
			}
			
			.stretch {
				-webkit-align-items: stretch;
				align-items: stretch;
			}
			
			.stretch li {
				background: hotpink;
			}
			
			.flex-item {
				background: tomato;
				padding: 5px;
				width: 50px;
				margin: 5px;
				line-height: 50px;
				color: white;
				font-weight: bold;
				font-size: 2em;
				text-align: center;
			}
		</style>

	</head>

	<body>
		<div class="box">
			<ul class="flex-container flex-start">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container flex-end">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container center">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container baseline">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container stretch">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>
		</div>
	</body>

</html>

レンダリング:

155021755264408CSSのalign-items属性の使い方は？

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。！！

以上がCSSのalign-items属性の使い方は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

@KeyFrames CSS：最も使用されているトリックMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude：1）defingsmoothtransitionsbetweenstates、2）AnimatingMultipleProperiessimally、3）3）bendorprefixesforbrows -compativity、4）組み合わせwithjavasfo