The align-self property in Flexbox allows for individual alignment of a flex item along the cross axis within its Flex container. This property overrides the align-items value for that particular element, providing granular control over its alignment.

Values of align-self

1. auto (default): The element follows the container's align-items value.
2. flex-start: The item aligns to the start of the cross axis.
3. flex-end: The item aligns to the end of the cross axis.
4. center: The item is centered along the cross axis.
5. baseline: The item aligns according to its text baseline.
6. stretch: The item stretches to fill the container along the cross axis (if no specific height is set).

Using the align-self Property

The align-self property is applied to flex items (children of the Flex container) to adjust their alignment individually.

Example with align-self

css

html

[Placeholder: Image showing several flex items with different align-self values to illustrate how they individually align along the cross axis]

Complete Example

In this example, each flex item uses a different align-self value to demonstrate its impact on alignment along the cross axis.

html

[Placeholder: Image showing the container with several items, each using different align-self values to illustrate individual alignment]

Summary

• align-self: Adjusts the alignment of an individual item along the cross axis.
• Common values:
  • auto: Follows the container's align-items value.
  • flex-start: Aligns to the start of the cross axis.
  • flex-end: Aligns to the end of the cross axis.
  • center: Centers along the cross axis.
  • baseline: Aligns according to the text baseline.
  • stretch: Stretches to fill the container along the cross axis (if no specific height is set).

Proper use of align-self allows for custom and flexible alignment of individual items, improving precision and control in designing flexible and responsive layouts.