Skip to main content
MybringDesign System

Justify

Position flex children on the main axis

How to use

Flexbox has two axes: main and cross. The main axis follows the flex-direction.

Class Declaration Usage
justify-cfs justify-content: flex-start; Parent Positions the flex children at the start of the main axis. This is the default.
justify-cfe justify-content: flex-end; Parent Positions the flex children at the end of the main axis.
justify-cc justify-content: center; Parent Centers the flex children on the main axis.
justify-csb justify-content: space-between; Parent Distributes the flex children along the main axis with equal space between them.
justify-csa justify-content: space-around; Parent Distributes the flex children along the main axis with equal space between them and half-size on either end.
justify-cse justify-content: space-evenly; Parent Distributes the flex children along the main axis with equal space around and between them.

Examples

flex-start / default

A
B
C
<div class="bg-gray4 paxs flex justify-cfs">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>

flex-end

A
B
C
<div class="bg-gray4 paxs flex justify-cfe">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>

center

A
B
C
<div class="bg-gray4 paxs flex justify-cc">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>

space-between

A
B
C
<div class="bg-gray4 paxs flex justify-csb">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>

space-around

A
B
C
<div class="bg-gray4 paxs flex justify-csa">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>

space-evenly

A
B
C
<div class="bg-gray4 paxs flex justify-cse">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>