align-items

/* コンテナの高さいっぱいに伸ばす（初期値） */
.container { display: flex; align-items: stretch;}

/* 上揃え */
.container-start { display: flex; align-items: flex-start;}

/* 中央揃え */
.container-center { display: flex; align-items: center;}

/* 下揃え */
.container-end { display: flex; align-items: flex-end;}

/* テキストのベースラインで揃える */
.container-base { display: flex; align-items: baseline;}

デスクトップ

Chrome

29 以降 ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

21 △

↑ prefix『-webkit-』が必要

20 以前 ×

Firefox

20 以降 ○

19 以前 ×

Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 ×

9 ×

8 ×

7 ×

6 ×

Opera

16 以降 ○

15 △

↑ prefix『-webkit-』が必要

14 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

『align-items』はフレックスコンテナに指定するプロパティで、交差軸方向（『flex-direction: row』の場合は縦方向）のアイテムの揃え方を一括で制御します。『justify-content』が主軸方向を担当し、『align-items』が交差軸方向を担当するという関係です。

アイテムにサイズ（『height』や『width』）が明示的に指定されていない場合、コンテナの交差軸方向いっぱいに引き伸ばされます。これが初期値であるため、『display: flex』を指定しただけでアイテムの高さが揃うのはこのプロパティの効果です。アイテムに明示的なサイズが指定されている場合は『stretch』でも伸ばされません。

アイテムを交差軸の中央に揃えます。『justify-content: center』と組み合わせることで、上下左右の完全な中央配置が実現できます。これはFlexboxの最も代表的な使い方の一つです。

/* 上下左右の完全中央配置 */
.perfect-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

各アイテム内のテキストのベースライン（文字の底辺の線）を揃えます。フォントサイズが異なるアイテムが混在する場合に、テキストの位置を自然に揃えたいときに使います。

/* フォントサイズの異なる要素のテキスト位置を揃える */
.nav {
    display: flex;
    align-items: baseline;
}
.nav-title { font-size: 24px;}
.nav-link { font-size: 14px;}

特定のアイテムだけ交差軸の揃え方を変えたい場合は、そのアイテムに『align-self』プロパティを指定します。『align-items』はコンテナ全体に対する一括指定で、『align-self』は個別のアイテムに対する指定です。

.container {
    display: flex;
    align-items: flex-start;  /* 全体は上揃え */
}
.special-item {
    align-self: flex-end;  /* このアイテムだけ下揃え */
}