Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Get ready for the next version of Yumma CSS, which is going to be amazing!

Align Content

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

Class Property

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.

A
B
C
D
E
 
<div class="ac-b stripes d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">E</div>
</div>

Center

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

A
B
C
D
E
 
<div class="ac-c stripes d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f jc-c 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.

A
B
C
D
E
 
<div class="ac-fe stripes d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f jc-c 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.

A
B
C
D
E
 
<div class="ac-fs stripes d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">E</div>
</div>

Normal

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

A
B
C
D
E
 
<div class="ac-n stripes d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">E</div>
</div>

Stretch

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

A
B
C
D
E
 
<div class="ac-s stripes d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f jc-c 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.

A
B
C
D
E
 
<div class="ac-sa stripes d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">E</div>
</div>

Space Between

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

A
B
C
D
E
 
<div class="ac-sb stripes d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f jc-c 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.

A
B
C
D
E
 
<div class="ac-se stripes d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">A</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">B</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">C</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">D</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-2">E</div>
</div>

Using responsive modifiers

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 ..."></div>

Using hover modifiers

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

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