Sometimes one flex item wants to do its own thing. Use align-self to override the cross-axis alignment that align-items gives to every item in a flex container. section 12.6
Think of the two properties as a friendly team:
- Use align-items when all items should share one cross-axis alignment. section 12.6
- Use align-self when one item needs a different cross-axis position. section 12.6
- Set align-self: auto to return that item to the container’s current align-items setting. section 12.6
One item moves to the other side
If a container uses align-items: flex-start, its items begin at the cross-axis start. Give the last item align-self: flex-end, and that one item goes to the cross-axis end instead. section 12.6
item {
align-self: stretch|flex-start|flex-end|center|baseline;
}
The available alignment values match the cross-axis alignment choices used for flex items. section 12.6
Quick takeaway: align-items sets the group rule; align-self gives one item permission to break it. section 12.18
