Tailwind Crash Course - Project Based Learning
Flexbox Direction (Vertical)
We can of course do alignment vertically. Previously, we read about horizontal alignment but now we will see how Flexbox vertical alignment works in Tailwind.
| Alignments | |
| stretch start center end baseline |
Default - fill container |
To make vertical alignment work, we need to make sure that wrapping div have some height. So, we will give some height to the wrapping div first and a background color and then add .items-center.
<div class="bg-gray-200 h-32 flex justify-around items-center">
<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. I love it 😍
📝 Note: Make you have a proper height in your container/wrapping div to make .items-{alignment} work. Do not get confused. Just to run a quick check, give a background color to the wrapping/container just to visualise how tall that container is and then remove background color after check.
There is something to make you understand and that will be easier to understand in Text form example.
We have a very simple flex container here with a <div> and a <p> tag inside it.
<div class="flex"> <!-- wrapping div-->
<div class="text-2xl bg-blue-200">•</div>
<p class="text-5xl">Hello there.</p>
</div>Result will be something:
📝 Note: As mentioned in the table, .items-stretch is default. So, if we add .items-stretch next to .flex, result will remain same. You can give it a try.
Now, we add .items-start to the wrapping div (next to .flex).
<div class="flex items-start”> <!-- wrapping div-->
<div class="text-2xl bg-blue-200">•</div>
<p class="text-5xl">Hello there.</p>
</div>Check result here.
Noticed something? Bullet is on the exact same place but bullet container is only as tall as bullet not as tall as it’s wrapping container.
This is slight difference between .items-stretch and .items-start. And without giving bullet a background, you could not understand the difference between these two.
So this is how we can vertically align some items and horizontally and of course, they could be used in conjunction with each other.
