CSS ・ Flexbox・Grid
align-items
交差軸方向の配置
Flexbox や Grid で、子要素を交差軸方向（横並びのときは縦方向）にどう揃えるかを指定します。
01
サンプルコード
HTML
1<div class="flex">
2 <div class="item">短い</div>
3 <div class="item tall">背の高い<br>アイテム<br>です</div>
4 <div class="item">短い</div>
5</div>
CSS
1.flex {
2 display: flex;
3 align-items: center;
4 gap: 8px;
5 height: 120px;
6 background: #f5efe6;
7}
8.item {
9 padding: 8px 14px;
10 background: #b68235;
11 color: #fff;
12}
02
実行結果
ブラウザでの表示
03
解説
align-items は、並んだ子要素を交差軸方向に揃えるプロパティです。横並び（row）のときは縦方向の揃え方になります。
上の例では center を指定し、高さの違うアイテムを上下中央に揃えています。初期値の stretch では、アイテムが親の高さいっぱいまで伸びます。
justify-content（主軸方向）と組み合わせると、要素を上下左右の中央に置けます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
stretch | 親の高さいっぱいに伸ばす（flex の既定の動き） |
flex-start / start | 上揃え（横並びのとき） |
center | 中央揃え |
flex-end / end | 下揃え |
baseline | 文字のベースラインで揃える |
アイコンと文字の高さをそろえる
横に並べたアイコンと文字を、上下中央に揃える定番の書き方です。
HTML
1<p class="with-icon"><svg width="16" height="16">…</svg>お知らせ</p>
CSS
1.with-icon {
2 display: flex;
3 align-items: center;
4 gap: 6px;
5}
注意点
- 01align-items は親要素に書きます。1つのアイテムだけ揃え方を変えるには、子要素に align-self を指定します。
- 02親の高さがアイテムと同じだと、揃え方を変えても見た目は変わりません。