align-self

style.css

/* 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 + ○

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' is a property specified on individual flex items that lets you override the container's 'align-items' value for that item alone. Use it when you want something like "align everything to the top, but center just this one item".

'align-items' is a property specified on the container that sets the alignment for all items at once. 'align-self' is a property specified on individual items to override that setting. When 'align-self: auto' (the initial value) is set, the container's 'align-items' value is applied as-is.

.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) */
}