Justify Content

Example class
block 1
block 2
block 3
 .justify-start
block 1
block 2
block 3
 .justify-end
block 1
block 2
block 3
 .justify-center
block 1
block 2
block 3
 .justify-between
block 1
block 2
block 3
 .justify-around

Justify start

Class: .justify-start

<div class="flex justify-start bg-gray-light">
    <div class="white bg-blue p-3 m-1">block 1</div>
    <div class="white bg-blue p-3 m-1">block 2</div>
    <div class="white bg-blue p-3 m-1">block 3</div>
</div>
block 1
block 2
block 3

Justify end

Class: .justify-end

<div class="flex justify-end bg-gray-light">
    <div class="white bg-blue p-3 m-1">block 1</div>
    <div class="white bg-blue p-3 m-1">block 2</div>
    <div class="white bg-blue p-3 m-1">block 3</div>
</div>
block 1
block 2
block 3

Justify center

Class: .justify-center

<div class="flex justify-center bg-gray-light">
    <div class="white bg-blue p-3 m-1">block 1</div>
    <div class="white bg-blue p-3 m-1">block 2</div>
    <div class="white bg-blue p-3 m-1">block 3</div>
</div>
block 1
block 2
block 3

Justify between

Class: .justify-between

<div class="flex justify-between bg-gray-light">
    <div class="white bg-blue p-3 m-1">block 1</div>
    <div class="white bg-blue p-3 m-1">block 2</div>
    <div class="white bg-blue p-3 m-1">block 3</div>
</div>
block 1
block 2
block 3

Justify around

Class: .justify-around

<div class="flex justify-around bg-gray-light">
    <div class="white bg-blue p-3 m-1">block 1</div>
    <div class="white bg-blue p-3 m-1">block 2</div>
    <div class="white bg-blue p-3 m-1">block 3</div>
</div>
block 1
block 2
block 3
Responsive variants
.sm-justify-start
.md-justify-start
.lg-justify-start
.xl-justify-start
.sm-justify-end
.md-justify-end
.lg-justify-end
.xl-justify-end
.sm-justify-center
.md-justify-center
.lg-justify-center
.xl-justify-center
.sm-justify-between
.md-justify-between
.lg-justify-between
.xl-justify-between
.sm-justify-around
.md-justify-around
.lg-justify-around
.xl-justify-around