align-items

/* Stretch to fill the container height (default) */
.container { display: flex; align-items: stretch;}

/* Align to top */
.container-start { display: flex; align-items: flex-start;}

/* Center alignment */
.container-center { display: flex; align-items: center;}

/* Align to bottom */
.container-end { display: flex; align-items: flex-end;}

/* Align to text baseline */
.container-base { display: flex; align-items: baseline;}

Desktop

Chrome

29 + ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

21 △

↑ Requires prefix '-webkit-'

20 and earlier ×

Firefox

20 + ○

19 and earlier ×

Safari

9 + ○

8 △

7 △

↑ Requires prefix '-webkit-'

6 and earlier ×

Edge

12 + ○

Supported in all versions.

IE

11 ○

10 ×

9 ×

8 ×

7 ×

6 ×

Opera

16 + ○

15 △

↑ Requires prefix '-webkit-'

14 and earlier ×

Mobile

iOS Safari

9 + ○

8 △

7 △

↑ Requires prefix '-webkit-'

6 and earlier ×

Android Browser

4.4 + ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

* Version information is based on MDN / Can I Use .

The 'align-items' property is specified on a flex container to control item alignment along the cross axis (vertical when 'flex-direction: row'). The 'justify-content' property handles the main axis, while 'align-items' handles the cross axis.

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

Centers items along the cross axis.『justify-content: center』と組み合わせることで、上下左右の完全な中央配置が実現できます。これはFlexboxの最も代表的な使い方の一つです。

/* Perfect centering in all directions */
.perfect-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

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

/* Align text positions of elements with different font sizes */
.nav {
    display: flex;
    align-items: baseline;
}
.nav-title { font-size: 24px;}
.nav-link { font-size: 14px;}

To change the cross-axis alignment for a specific item only, use the 'align-self' property on that item. The 'align-items' property is a bulk setting for the entire container, while 'align-self' is for individual items.

.container {
    display: flex;
    align-items: flex-start;  /* All items align to top */
}
.special-item {
    align-self: flex-end;  /* Only this item aligns to bottom */
}