align-items プロパティ

align-items プロパティは、フレックスボックスにおける交差軸方向、またはグリッドにおける垂直軸方向の要素の配置を設定します。親要素に適用されます。

構文

セレクタ {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

値

値	説明
`flex-start`	ブロックが交差軸（垂直軸）の始端に揃えられます。
`flex-end`	ブロックが交差軸（垂直軸）の終端に揃えられます。
`center`	ブロックが交差軸（垂直軸）の中央に配置されます。
`baseline`	要素がそれらのベースラインに沿って揃えられます。ベースラインは、`'p'`や`'y'`のような文字のディセンダー（下部にはみ出る部分）を考慮せず、文字の下端を通る仮想の線です。
`stretch`	ブロックが交差軸方向の利用可能なスペース全体に引き伸ばされます。ただし、`min-width`や`max-width`（`min-height`、`max-height`）が設定されている場合はそれが考慮されます。要素に幅と高さが指定されている場合、`stretch`は無視されます。

初期値: stretch。

例 . stretch 値

現在、主軸は左から右に向かっており、交差軸方向では要素がコンテナの高さいっぱいに伸びています:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

例 . stretch 値 + 要素のサイズ指定

現在、要素に幅と高さが指定されているため、align-items プロパティの stretch 値は無視されます:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

例 . flex-start 値、要素のサイズ指定なし

現在、要素は上端に揃えられます:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

例 . flex-start 値 + 要素のサイズ指定

現在、要素は引き続き上端に揃えられますが、幅と高さが指定されています:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

例 . flex-end 値 + 要素のサイズ指定

現在、要素は下端に揃えられます:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

例 . center 値 + 要素のサイズ指定

現在、要素は交差軸（この場合は垂直方向）の中央に配置されます:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

例 . center 値、要素のサイズが異なる場合

現在、要素の高さは異なっています（ここではテキストによって高さが決まっていますが、heightを指定することもできます）。幅は width が指定されているためすべて同じです:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

例 . baseline 値、要素のサイズが異なる場合

ベースラインによる配置は次のようになります:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

例 . グリッド内での垂直軸始端への配置

グリッドセル内の要素を垂直軸の始端に揃えてみましょう:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

ブラウザの開発者ツールでこのグリッドを見てみましょう:

例 . グリッド内での垂直軸中央への配置

次に、セル内の要素を垂直軸の中央に揃えてみます:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

開発者ツールでのグリッドの表示を見てみましょう:

例 . グリッド内での垂直軸終端への配置

今度は要素の配置を垂直軸の終端に変更します:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	
}

開発者ツールでグリッドがどのように表示されるか見てみましょう: