Use align-self when one flex item needs to sit differently from its siblings on the container’s cross axis. Think of align-items as the group rule and align-self as a one-item exception: one rebel can move without making everyone else rearrange their furniture. section 12.4
item {
align-self: stretch|flex-start|flex-end|center|baseline;
}
Apply align-self to the individual flex item. Its alignment values work like the cross-axis choices used by align-items. section 12.4
Choose a value based on where that one item should go on the cross axis:
- stretch makes the item stretch. section 12.4
- flex-start, flex-end, and center place it at the start, end, or middle. section 12.4
- baseline aligns it by its baseline. section 12.4
- auto returns the item to the alignment currently supplied by align-items. section 12.4
One item breaks from the pack
Set the container’s align-items value to flex-start, then give the last flex item align-self: flex-end. The other items stay at the cross-axis start while that last item moves to the end. section 12.4
REMEMBER: align-self changes alignment, not an item’s size or position in ordering. Reach for it specifically when the question is, “Should this one item ignore the group’s cross-axis alignment?” section 12.4 section 12.7
