Understanding the align-self Property in Flexbox
The align-self property in CSS allows individual flex items to override the container’s align-items setting. It controls how a specific item is aligned along the cross axis (perpendicular to the main axis). This makes it useful when you need a single item to have a different alignment than the others in the same flex container.
align-self: auto | flex-start | flex-end | center | baseline | stretch;Default value is
auto, which means the item inherits the container’salign-itemsvalue.
auto: Inherits from the container’salign-itemsproperty.flex-start: Aligns the item at the start of the cross axis.flex-end: Aligns the item at the end of the cross axis.center: Centers the item along the cross axis.baseline: Aligns the item’s baseline with other items.stretch: Stretches the item to fill the container (default if height is auto).
In this example, all items are aligned to the center of the container by default, but Item 2 moves to the bottom (flex-end), and Item 3 moves to the top (flex-start) because of their align-self values.
Use
align-selfto override alignment for specific flex items without changing the container’s layout.Combine with
align-itemsfor consistent yet flexible layouts.Avoid overusing different alignments within the same container for cleaner design consistency.