Align Content
Controls the positioning of rows in multi-row Flex and Grid containers.
Widely available
This feature is well established and works across many devices and browser versions.
| Class | Style |
|---|---|
ac-b | align-content: baseline; |
ac-c | align-content: center; |
ac-fe | align-content: flex-end; |
ac-fs | align-content: flex-start; |
ac-n | align-content: normal; |
ac-st | align-content: stretch; |
ac-sa | align-content: space-around; |
ac-sb | align-content: space-between; |
ac-se | align-content: space-evenly; |
Normal
Initial value
The items will be aligned according to the default alignment of the container.
<div class="ac-n d-g g-4 gtc-3 h-64 tc-white w-full"> <div class="ai-c bg-indigo d-f jc-c p-4">A</div> <div class="ai-c bg-indigo d-f jc-c p-4">B</div> <div class="ai-c bg-indigo d-f jc-c p-4">C</div> <div class="ai-c bg-indigo d-f jc-c p-4">D</div> <div class="ai-c bg-indigo d-f jc-c p-4">E</div></div>Baseline
The items will be aligned along the baseline of the container.
<div class="ac-b d-g g-4 gtc-3 h-64 tc-white ta-c w-full"> <div class="bg-indigo p-4">A</div> <div class="bg-indigo p-4">B</div> <div class="bg-indigo p-4">C</div> <div class="bg-indigo p-4">D</div> <div class="bg-indigo p-4">E</div></div>Center
The items will be centered within the container.
<div class="ac-c d-g g-4 gtc-3 h-64 tc-white ta-c w-full"> <div class="bg-indigo p-4">A</div> <div class="bg-indigo p-4">B</div> <div class="bg-indigo p-4">C</div> <div class="bg-indigo p-4">D</div> <div class="bg-indigo p-4">E</div></div>Flex End
The items will be aligned to the end of the container.
<div class="ac-fe d-g g-4 gtc-3 h-64 tc-white ta-c w-full"> <div class="bg-indigo p-4">A</div> <div class="bg-indigo p-4">B</div> <div class="bg-indigo p-4">C</div> <div class="bg-indigo p-4">D</div> <div class="bg-indigo p-4">E</div></div>Flex Start
The items will be aligned to the start of the container.
<div class="ac-fs d-g g-4 gtc-3 h-64 tc-white ta-c w-full"> <div class="bg-indigo p-4">A</div> <div class="bg-indigo p-4">B</div> <div class="bg-indigo p-4">C</div> <div class="bg-indigo p-4">D</div> <div class="bg-indigo p-4">E</div></div>Stretch
The items will stretch to fill the container along the cross axis.
<div class="ac-s d-g g-4 gtc-3 h-64 tc-white w-full"> <div class="ai-c bg-indigo d-f jc-c p-4">A</div> <div class="ai-c bg-indigo d-f jc-c p-4">B</div> <div class="ai-c bg-indigo d-f jc-c p-4">C</div> <div class="ai-c bg-indigo d-f jc-c p-4">D</div> <div class="ai-c bg-indigo d-f jc-c p-4">E</div></div>Space Around
The items will be evenly distributed in the container with space around them.
<div class="ac-sa d-g g-4 gtc-3 h-64 tc-white ta-c w-full"> <div class="bg-indigo p-4">A</div> <div class="bg-indigo p-4">B</div> <div class="bg-indigo p-4">C</div> <div class="bg-indigo p-4">D</div> <div class="bg-indigo p-4">E</div></div>Space Between
The items will be evenly distributed in the container with the first item at the start and the last item at the end.
<div class="ac-sb d-g g-4 gtc-3 h-64 tc-white ta-c w-full"> <div class="bg-indigo p-4">A</div> <div class="bg-indigo p-4">B</div> <div class="bg-indigo p-4">C</div> <div class="bg-indigo p-4">D</div> <div class="bg-indigo p-4">E</div></div>Space Evenly
The items will be evenly distributed in the container with equal space around them.
<div class="ac-se d-g g-4 gtc-3 h-64 tc-white ta-c w-full"> <div class="bg-indigo p-4">A</div> <div class="bg-indigo p-4">B</div> <div class="bg-indigo p-4">C</div> <div class="bg-indigo p-4">D</div> <div class="bg-indigo p-4">E</div></div>Using utility variants
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Targeting different viewports
You can combine responsive breakpoints like sm:ac-*, md:ac-*, lg:ac-*, and xxl:ac-* to allow targeting specific utilities in different viewports.
Targeting hover states
Alternatively, you can apply :hover by using h:ac-* utility to override elements and change their values when hovering over them.