is now part of Shuffle™. The new editor includes templates for Tailwind CSS, Bootstrap, Bulma, and Material-UI.
Switch to Shuffle →
← Tailwind CSS classes list

Tailwind CSS class: .justify-start / .justify-*

<div class="flex justify-start bg-gray-200 my-2">
 <div class="bg-teal-400 p-2 m-2">1</div>
 <div class="bg-teal-400 p-2 m-2">2</div>
 <div class="bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex justify-center bg-gray-200 my-2">
 <div class="bg-teal-400 p-2 m-2">1</div>
 <div class="bg-teal-400 p-2 m-2">2</div>
 <div class="bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex justify-end bg-gray-200 my-2">
 <div class="bg-teal-400 p-2 m-2">1</div>
 <div class="bg-teal-400 p-2 m-2">2</div>
 <div class="bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex justify-between bg-gray-200 my-2">
 <div class="bg-teal-400 p-2 m-2">1</div>
 <div class="bg-teal-400 p-2 m-2">2</div>
 <div class="bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex justify-around bg-gray-200 my-2">
 <div class="bg-teal-400 p-2 m-2">1</div>
 <div class="bg-teal-400 p-2 m-2">2</div>
 <div class="bg-teal-400 p-2 m-2">3</div>
</div>

Preview

1
2
3
1
2
3
1
2
3
1
2
3
1
2
3

CSS source

.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; }

More in Tailwind CSS Flex