Justify Content

Below, utility classes to apply justify-content property.

Class	Properties
.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;

Example(s)

1

2

3

<div class="flex-row justify-start">
  <div class="sqrt-12 ...">1</div>
  <div class="sqrt-12 ...">2</div>
  <div class="sqrt-12 ...">3</div>
</div>

1

2

3

<div class="flex-row justify-center">
  <div class="sqrt-12 ...">1</div>
  <div class="sqrt-12 ...">2</div>
  <div class="sqrt-12 ...">3</div>
</div>

1

2

3

<div class="flex-row justify-end">
  <div class="sqrt-12 ...">1</div>
  <div class="sqrt-12 ...">2</div>
  <div class="sqrt-12 ...">3</div>
</div>

Media Queries

justify-content is supported by changing state on-the-fly! You can use it like this:

<div class="justify-start medium:justify-center extra-large:justify-end">...</div>