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>