Justify content

Utilities for aligning flex items along the main axis.

Quick reference

Class	Styles
af-justify-start	justify-content: flex-start
af-justify-center	justify-content: center
af-justify-end	justify-content: flex-end
af-justify-between	justify-content: space-between
af-justify-around	justify-content: space-around
af-justify-evenly	justify-content: space-evenly

Examples

Basic example

A

B

C

<div class="af-flex af-justify-between" style="gap: 0.5rem;">
  <div class="af-badge">
    A
  </div>
  <div class="af-badge">
    B
  </div>
  <div class="af-badge">
    C
  </div>
</div>

Responsive variants

All justify utilities support responsive variants using the @{bp} suffix:

• af-justify-center@lg

See Responsive Suffix for syntax and breakpoints.

Related

• Align items