Tailwind Crash Course - Project Based Learning
Flexbox Direction (Horizontal)
This makes flex so powerful. We have multiple alignments but start alignment is default.
| Alignments | |
| start center end between around |
Default |
Let’s try: .justify-center
<!-- Simply add justify-{alignment} next to flex in wrapping div -->
<div class=“flex justify-center”> <!-- wrapping div-->
<div class="bg-yellow-600 w-16 h-16">1</div>
<div class="bg-teal-700 w-16 h-16">2</div>
<div class="bg-red-700 w-16 h-16">3</div>
</div>Here 👇 is the result:
You can try using different alignments as given in the table.
One of the coolest thing about Flexbox is between and around.
Let’s give .justify-between a try:
<!-- Simply change justify-center to justify-between in wrapping div -->
<div class=“flex justify-between”> <!-- wrapping div-->
<div class="bg-yellow-600 w-16 h-16">1</div>
<div class="bg-teal-700 w-16 h-16">2</div>
<div class="bg-red-700 w-16 h-16">3</div>
</div>🤩 Cool! Isn’t it?
.justify-around
If we use .justify-around in the wrapping div, result will be:
