A modern way to center a specific element within a flex or grid container.
align-self in CSS allows you to adjust the alignment of a specific element within a flex container or grid. Here’s how it works:
In a flexbox container, align-self positions the element along the cross-axis.
In a grid, align-self positions the element within the grid area.
Here are some possible values for align-self:
auto (default): The element inherits the align-items property of the parent container or defaults to “stretch” if there’s no parent container.
stretch: The element expands to fill the container.
center: The element is centered within the container.
flex-start: The element is positioned at the start of the container.
flex-end: The element is positioned at the end of the container.
baseline: The element aligns with the text baseline.
initial: Resets to the default value.
inherit: Inherits the value from the parent.
In summary, align-self lets you customize the alignment of a specific element within a flex container or grid.