Align-self – Horeca Webservice Knowledge Base

The align-self property in CSS allows you to override the alignment of an individual flex or grid item within its container. It gives you more control over how specific elements are positioned without affecting others. It works in flexbox and grid layouts, and it accepts values like:

auto: Uses the default alignment set by the container.
flex-start / start: Aligns the item to the beginning of the container.
flex-end / end: Aligns the item to the end of the container.
center: Centers the item within the container.
baseline: Aligns the item based on text baselines.
stretch: Expands the item to fill the container.

For example, if you have a flex container and want to align one item differently from the rest, you can do something like:

.item {align-self: center;}
Code language: CSS (css)

This centers the .item within the flex container, while other items follow the default alignment.