Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog

Align Content

Controls the positioning of rows in multi-row Flex and Grid containers.

Class Properties

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-s

 align-content: stretch;

ac-sa

 align-content: space-around;

ac-sb

 align-content: space-between;

ac-se

 align-content: space-evenly;

Baseline

Each line will align itself along the baseline of the container.

<div class="ac-b area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Center

Each line will align itself in the center of the cross axis.

<div class="ac-c area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Flex end

Each line will fill the space it needs and move towards the end of the cross axis.

<div class="ac-fe area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Flex start

Each line will fill the space it needs and move towards the start of the cross axis.

<div class="ac-fs area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Normal

Each line will align in the default position along the cross axis.

<div class="ac-n area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Stretch

Each line will take up as much space as it can in the remaining space.

<div class="ac-stretch area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Space around

Each line fills the space it needs. The remaining space will be distributed equally around the lines.

<div class="ac-sa area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Space between

Each line fills its space. The rest of the space will be between the lines.

<div class="ac-sb area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Space evenly

Each line fills its space, and the remaining space is distributed evenly between and around the lines.

<div class="ac-se area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Using breakpoints

Using responsive breakpoints like sm:ac-*, md:ac-*, lg:ac-*, and xxl:ac-* allows targeting specific utilities in different viewports.

<div class="ac-s md:ac-e ac-"></div>

Using variants

Using :hover variants such as h:ac-* allows you to override elements and change their values when hovering over them.

<div class="ac-s h:ac-e ac-"></div>