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!

Justify Content

Controls the positioning of flex and grid elements on a container’s main axis.

Class Property

jc-c

 justify-content: center;

jc-fe

 justify-content: flex-end;

jc-fs

 justify-content: flex-start;

jc-n

 justify-content: normal;

jc-s

 justify-content: stretch;

jc-sb

 justify-content: space-between;

jc-sa

 justify-content: space-around;

jc-se

 justify-content: space-evenly;

Center

Aligns flex items at the center of the container.

A
B
C
 
<div class="stripes d-f g-4 jc-c">
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">A</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">B</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">C</div>
</div>

Flex End

Aligns flex items to the end of the container.

A
B
C
 
<div class="stripes d-f g-4 jc-fe">
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">A</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">B</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">C</div>
</div>

Flex Start

Aligns flex items to the start of the container.

A
B
C
 
<div class="stripes d-f g-4 jc-fs">
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">A</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">B</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">C</div>
</div>

Normal

Resets the alignment to its default state.

A
B
C
 
<div class="stripes d-f g-4 jc-n">
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">A</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">B</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">C</div>
</div>

Stretch

Stretches flex items across the container (default for some cases).

A
B
C
 
<div class="ovf-auto p-8 rad-2">
  <div class="stripes d-g g-4 gaf-c jc-s rad-2 tc-white">
    <div class="ai-c bg-indigo d-f h-14 jc-c rad-2">A</div>
    <div class="ai-c bg-indigo d-f h-14 jc-c rad-2">B</div>
    <div class="ai-c bg-indigo d-f h-14 jc-c rad-2">C</div>
  </div>
</div>

Space Between

Distributes flex items with space between them.

A
B
C
 
<div class="stripes d-f g-4 jc-sb">
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">A</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">B</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">C</div>
</div>

Space Around

Distributes flex items with space around them.

A
B
C
 
<div class="stripes d-f g-4 jc-sa">
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">A</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">B</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">C</div>
</div>

Space Evenly

Distributes flex items with equal space between, before, and after them.

A
B
C
 
<div class="stripes d-f g-4 gaf-c jc-se">
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">A</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">B</div>
  <div class="ai-c bg-indigo d-f dim-14 jc-c p-4 rad-2 tc-white">C</div>
</div>

Using responsive modifiers

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

<div class="jc-fs md:jc-fe ..."></div>

Using hover modifiers

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

<div class="jc-fs h:jc-fe ..."></div>