Dialtone
GitHub Repo
Codepen Template

Justify Content

Utilities for setting how an element's space around and between content is distributed along it's main axis.

Classes

ClassOutput
.d-jc-flex-startjustify-content: flex-start
.d-jc-flex-endjustify-content: flex-end
.d-jc-centerjustify-content: center
.d-jc-space-aroundjustify-content: space-around
.d-jc-space-betweenjustify-content: space-between
.d-jc-space-evenlyjustify-content: space-evenly
.d-jc-baselinejustify-content: baseline
.d-jc-normaljustify-content: normal
.d-jc-unsetjustify-content: unset

Flex Start

Use d-jc-flex-start to justify items against the start of the element's main axis. This is the default value.

<div class="d-d-flex d-jc-flex-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Center

Use d-jc-center to justify items along the center of the element's main axis.

<div class="d-d-flex d-jc-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Flex End

Use d-jc-flex-end to justify items against the end of the element's main axis.

<div class="d-d-flex d-jc-flex-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Space Around

Use d-jc-space-around to justify items along the element's main axis so that there is an equal amount of space on each side of the item. This effectively takes all available space, divides it for each child element, placing half of available space on either side of the child. This is why the space appears doubled for interior objects versus end objects.

<div class="d-d-flex d-jc-space-around">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Space Between

Use d-jc-space-between to justify items along the element's main axis so that there is an equal amount of space between each item without inserting any space between the first or last object.

<div class="d-d-flex d-jc-space-between">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Space Evenly

Use d-jc-space-evenly to justify items along the element's main axis so that there is an equal amount of space on each side of the item, but unlike d-jc-space-around visually evenly spaces objects.

<div class="d-d-flex d-jc-space-evenly">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
Last Updated: