Controls flex and grid positioning along a container’s transverse axis.
Class | Properties |
ai-n | align-items: normal; |
ai-stretch | align-items: stretch; |
ai-c | align-items: center; |
ai-start | align-items: start; |
ai-e | align-items: end; |
ai-fs | align-items: flex-start; |
ai-fe | align-items: flex-end; |
Center
Aligns items in the center of the cross axis.
Flex End
Aligns items at the end of the cross axis.
Flex Start
Aligns items at the start of the cross axis.
Stretch
Stretches items to fill the container’s height.
Using breakpoints
Using responsive breakpoints like sm:ai-*
, md:ai-*
, lg:ai-*
, and xxl:ai-*
allows targeting specific utilities in different viewports.
Using variants
Using :hover
variants such as h:ai-*
allows you to override elements and change their values when hovering over them.