Flexbox

Justify Content

Utilities for controls how flex items are positioned along container's main axis.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
justify-start	justify-content: flex-start
justify-center	justify-content: center
justify-end	justify-content: flex-end
justify-between	justify-content: space-between
justify-around	justify-content: space-around

Usage

Set flex child elements to be positioned at the beginning with justify-start.

<div class="flex justify-start">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .justify-start;
}

SCSS

Set flex child elements to be positioned at the center with justify-center.

<div class="flex justify-center">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .justify-center;
}

SCSS

Set flex child elements to be positioned at the end of the available parent element spacing with justify-end.

<div class="flex justify-end">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .justify-end;
}

SCSS

Set flex child elements to be positioned at the beginning and the ending of the available parent element spacing with justify-between.

<div class="flex justify-between">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .justify-between;
}

SCSS

Set flex child elements to be positioned spacing between elements evenly of the available parent element with justify-around.

<div class="flex justify-around">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .justify-around;
}

SCSS