CSS

The align-items property in CSS controls the vertical alignment of elements and allows you to position them at the center, top, or bottom, among other options. It is a property that beginners can easily understand and use to align elements in the desired vertical position.

align-items

　align-itemsプロパティは、フレックスボックスやグリッドコンテナ内の要素の垂直方向（縦方向）の配置を制御するためのプロパティです。このプロパティを使用することで、要素を上下中央揃えや上寄せ、下寄せなど、さまざまな位置に配置することができます。

　まずは、align-itemsプロパティの基本的な使い方を見てみましょう。以下のコードを例に考えます。

HTML

<div class="sample1">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
</div>

CSS

.sample1 {
	display: flex;
	align-items: center;
	background-color: palegreen;
	height: 100px;
	margin: 10px;
}

.sample1 div {
	width: 80px;
	margin: 10px;
	padding: 10px;
	background-color: green;
}
Item 1
Item 2
Item 3

　上記のコードでは、.sample1クラスが親要素となり、内部に３つの divの子要素があります。親要素に display: flex; を指定することで、フレックスコンテナとして動作します。そして、align-items: center; を指定することで、子要素が垂直方向に中央揃えされます。

　align-itemsプロパティにはさまざまな値を指定することができます。

stretch（デフォルト）
要素の高さをフレックスコンテナの高さに合わせて伸縮させます。
flex-start（上寄せ）
要素をフレックスコンテナの上端に揃えます。
flex-end（下寄せ）
要素をフレックスコンテナの下端に揃えます。
center（中央揃え）
要素をフレックスコンテナの中央に揃えます。
baseline（ベースライン揃え）
テキスト要素のベースラインを揃えます。

　フレックスレイアウトの場合の挙動については、W3Cのページ に掲載されている図がわかりやすいようです。

　align-itemsプロパティは、フレックスコンテナ内の全ての要素に対して適用されます。つまり、フレックスコンテナ内の複数の要素がある場合に、それらの要素全体の垂直方向の配置が制御されます。

　align-itemsプロパティは、フレックスボックスだけでなく、グリッドコンテナに対しても使用することができます。グリッドコンテナでは、align-itemsプロパティは行方向（水平方向）ではなく、列方向（垂直方向）の配置に対して適用されます。

CSS

.sample1 {
	display: grid;
	align-items: center;
}

　上記のコードでは、.sample1クラスがグリッドコンテナとして定義されており、align-items: center; が指定されています。これにより、グリッド内のアイテムが垂直方向に中央揃えされます。

Sample

align-items: stretch; を指定。

Item 1
Item 2
Item 3

align-items: flex-start; を指定。

Item 1
Item 2
Item 3

align-items: flex-end; を指定。

Item 1
Item 2
Item 3

align-items: center; を指定。

Item 1
Item 2
Item 3

align-items: baseline; を指定。

Item 1
Item 2
Item 3

HTML

<p>align-items: stretch; を指定。</p>
<div class="sample1" style="align-items:stretch;">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
</div>

<p>align-items: flex-start; を指定。</p>
<div class="sample1" style="align-items:flex-start;">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
</div>

<p>align-items: flex-end; を指定。</p>
<div class="sample1" style="align-items:flex-end;">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
</div>

<p>align-items: center; を指定。</p>
<div class="sample1" style="align-items:center;">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
</div>

<p>align-items: baseline; を指定。</p>
<div class="sample1" style="align-items:baseline;">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
</div>

CSS

.sample1 {
	display: flex;
	background-color: palegreen;
	height: 100px;
	margin: 10px;
}

.sample1 div {
	width: 80px;
	margin: 10px;
	padding: 10px;
	background-color: green;
}