Controls the positioning of rows in multi-row Flex and Grid containers.
Class | Properties |
ac-c | align-content: center; |
ac-s | align-content: start; |
ac-e | align-content: end; |
ac-fs | align-content: flex-start; |
ac-fe | align-content: flex-end; |
ac-n | align-content: normal; |
ac-sb | align-content: space-between; |
ac-sa | align-content: space-around; |
ac-se | align-content: space-evenly; |
ac-stretch | align-content: stretch; |
Center
Each line will align itself in the center of the cross axis.
Flex end
Each line will fill the space it needs and move towards the end of the cross axis.
Flex start
Each line will fill the space it needs and move towards the start of the cross axis.
Normal
Each line will align in the default position along the cross axis.
Stretch
Each line will take up as much space as it can in the remaining space.
Space around
Each line fills the space it needs. The remaining space will be distributed equally around the lines.
Space between
Each line fills its space. The rest of the space will be between the lines.
Space evenly
Each line fills its space, and the remaining space is distributed evenly between and around the lines.
Using breakpoints
Using responsive breakpoints like sm:ac-*
, md:ac-*
, lg:ac-*
, and xxl:ac-*
allows targeting specific utilities in different viewports.
Using variants
Using :hover
variants such as h:ac-*
allows you to override elements and change their values when hovering over them.