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

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

青灯夜游

リリース： 2020-09-08 14:43:12

オリジナル

24004 人が閲覧しました

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属性の使い方は？