The align-self property allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. This is crucial for creating complex layouts where one element needs to behave differently from its siblings.

Understanding the Context

In a Flexbox container, the align-items property is set on the parent. It dictates how all children align along the Cross Axis. align-self is the exception to this rule, applied directly to the child.

Common Values

• auto: Inherits the value of the parent's align-items property.
• flex-start: Aligns the item to the start of the cross-axis (usually top).
• flex-end: Aligns the item to the end of the cross-axis (usually bottom).
• center: Centers the item on the cross-axis.
• stretch: Stretches the item to fill the container (default if height is auto).

When to Use

Use align-self when you have a row of items (like a navigation bar) where most items are centered, but one item (like a "Sign Up" button or logo) needs to be aligned to the top or stretched.