align-self

/* Follow the container's align-items (default) */
.item { align-self: auto;}

/* Center this item only */
.item-center { align-self: center;}

/* Align this item to the bottom only */
.item-end { align-self: flex-end;}

/* Stretch this item only */
.item-stretch { align-self: stretch;}

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

12.1 + ○

11 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 .

『align-self』はFlex itemsに指定するPropertyで、コンテナに設定された『align-items』のValueをそのアイテムだけ上書きできます。「全体は上揃えだけど、このアイテムだけ中央に配置したい」といった場合に使います。

『align-items』はコンテナに指定して全アイテムの揃え方を一括で決めるPropertyです。『align-self』はアイテムに指定して個別に上書きするPropertyです。『align-self: auto』（初期Value）の場合は、コンテナの『align-items』のValueがそのまま適用されます。

.container {
    display: flex;
    align-items: flex-start;  /* All items align to top */
    height: 200px;
}
.item-a { /* align-self: auto -> flex-start is applied */ }
.item-b { align-self: center;}    /* Only this item is centered */
.item-c { align-self: flex-end;}  /* Only this item aligns to bottom */

/* Pin only the footer to the bottom within a card */
.card {
    display: flex;
    flex-direction: column;
    height: 300px;
}
.card-body { flex: 1;}
.card-footer {
    align-self: flex-end;  /* Place at the end of the cross axis (horizontal) */
}