align-self

/* コンテナのalign-itemsに従う（初期値） */
.item { align-self: auto;}

/* このアイテムだけ中央に揃える */
.item-center { align-self: center;}

/* このアイテムだけ下に揃える */
.item-end { align-self: flex-end;}

/* このアイテムだけ伸ばす */
.item-stretch { align-self: stretch;}

デスクトップ

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

12.1 以降 ○

11 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

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

Firefox Android

最新版 ○

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

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

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

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

.container {
    display: flex;
    align-items: flex-start;  /* 全体は上揃え */
    height: 200px;
}
.item-a { /* align-self: auto → flex-startが適用される */ }
.item-b { align-self: center;}    /* このアイテムだけ中央 */
.item-c { align-self: flex-end;}  /* このアイテムだけ下揃え */

/* カード内でフッターだけ下に固定 */
.card {
    display: flex;
    flex-direction: column;
    height: 300px;
}
.card-body { flex: 1;}
.card-footer {
    align-self: flex-end;  /* 交差軸（横方向）の末尾に配置 */
}