align-itemsは、FlexboxやGridレイアウトにおいて、要素の垂直方向の整列を制御するプロパティです。
デザインに一貫性を持たせたり、中央揃えを簡単に実現できる便利な機能です。
本記事では、その基本的な使い方から、Flexbox・Gridでの具体例まで丁寧に解説します。
目次
align-itemsとは？
align-itemsは、親要素内での子要素の交差軸（通常は縦方向）における揃え方を指定するプロパティです。主にFlexboxやCSS Gridで使われ、すべての子要素に一括して適用されます。
主な値とその意味
| 値 | 意味 |
|---|---|
stretch | 子要素を親要素の高さいっぱいに引き伸ばす（初期値） |
flex-start / start | 上端に揃える |
flex-end / end | 下端に揃える |
center | 垂直方向の中央に揃える |
baseline | テキストのベースラインを揃える |
Flexboxでのalign-itemsの使い方
Flexboxでは、display: flex; を親要素に指定し、align-itemsで子要素の縦位置を調整します。
2番目の要素が他より高くなるように、文字サイズを大きくしています。内容するコンテンツの大きさが異なる場合、どのように表示されるかを確認してください。
normal（初期値）
<div class="flex-container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
.flex-container {
display: flex;
align-items: normal; /* 初期値 */
background-color: #f5f5f5;
}
.item {
background-color: #4caf50;
color: white;
padding: 10px;
margin: 5px;
}
.item:nth-child(2) {
font-size: 30px;
}
Preview
flex-start
<div class="flex-container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
.flex-container {
display: flex;
align-items: flex-start; /* 上に揃える */
background-color: #f5f5f5;
}
.item {
background-color: #4caf50;
color: white;
padding: 10px;
margin: 5px;
}
.item:nth-child(2) {
font-size: 30px;
}
Preview
flex-end
<div class="flex-container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
.flex-container {
display: flex;
align-items: flex-end; /* 下に揃える */
background-color: #f5f5f5;
}
.item {
background-color: #4caf50;
color: white;
padding: 10px;
margin: 5px;
}
.item:nth-child(2) {
font-size: 30px;
}
Preview
center
<div class="flex-container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
.flex-container {
display: flex;
align-items: center; /* 中央に揃える */
background-color: #f5f5f5;
}
.item {
background-color: #4caf50;
color: white;
padding: 10px;
margin: 5px;
}
.item:nth-child(2) {
font-size: 30px;
}
Preview
Gridレイアウトでのalign-itemsの使い方
Gridレイアウトでも同様に、親要素に display: grid; を指定し、align-itemsで縦方向の揃え方を設定します。
HTMLコード例
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
CSSコード例
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: flex-end; /* 下端に揃える */
height: 150px;
background-color: #e0f7fa;
}
.item {
background-color: #00796b;
color: white;
padding: 10px;
margin: 5px;
}
この例では、3つのグリッド要素が親要素の下端に揃っています。
align-itemsの値一覧
align-itemsには以下のような値があるので、実際に書いてみて挙動を確認してみてください。
/* 基本キーワード */
align-items: normal;
align-items: stretch;
/* 位置による配置 */
/* align-items は左と右の値を取らない */
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;
align-items: anchor-center;
/* ベースラインに配置する */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* オーバーフロー配置 (位置指定要素のみ) */
align-items: safe center;
align-items: unsafe center;
/* グローバル値 */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;よくある使い方と注意点
align-itemsは親要素に指定し、子要素すべてに影響します。- 特定の子要素だけ別の位置に揃えたい場合は、
align-selfを使用します。 - 初期値の
stretchは、高さが指定されていない子要素に有効です。 - テキストの位置を揃えたい場合は、
baselineが有効です。
まとめ
align-itemsは、FlexboxやGridで子要素の縦位置を調整するために非常に便利なプロパティです。centerやflex-endなどの値を適切に使い分けることで、より柔軟で整ったレイアウトが実現できます。
実際にコードを書いて動きを確認しながら学習していくのがおすすめです。ぜひ試してみてください。