Flexbox is a CSS layout module that helps you create responsive designs. When used with Tailwind, you can build these designs faster and more efficiently. In this post, we'll explore how to do that through interactive demos.
The first step to enable Flexbox is to use the flex class:
<div class="flex">
<!-- Flex items go here -->
</div>
By default, Flexbox uses a row or horizontal layout, but if you want to be specific, you can use the flex-row class. To switch to a vertical layout, you can use the flex-col class instead.
Try swapping between the classes below to see how the layout updates:
Great!
Now we can control the direction our elements are placed on the page. But what if we want to move the elements along the main axis?
The main axis is horizontal for row and vertical for column
To do this, you can use one of the following classes: justify-start, justify-center, justify-end, justify-between, justify-around, or justify-evenly. Try changing the class below to see what happens:
Note: Try changing to a column layout above to see how it affects the main axis
Now that we can move the elements along the main axis, what about the cross axis? The cross axis is the other direction depending on which layout you choose. In other words, it's vertical for row layouts and horizontal for column layouts.
To position elements along this axis, you can use one of the following classes: items-start, items-center, items-end, items-baseline, or items-stretch. Try changing the class below to see what happens:
Note: Try changing to a column layout above to see how it affects the cross axis
Okay, great. So we can move our elements in two directions, but all the elements move together. What if we want to change the position of just one element?
Luckily this is easy to do with Flexbox. In Tailwind, you can position an element along its cross axis using these classes: self-auto, self-start, self-center, self-end, self-baseline, or self-stretch. Try changing the class on the second div below to see what happens:
Note: Flexbox doesn't support aligning a single item along the main axis. This is because Flexbox is always focused on moving the entire group of items.
Okay! Now let's look at how to control the size of child elements within a Flexbox container.
To control the flex-grow, flex-shrink, and flex-basis properties, use flex-grow-0, flex-grow, flex-shrink-0, flex-shrink, flex-none, flex-1, flex-auto, or flex-initial.
Here's an example of how the flex-shrink-0 property prevents the second div from shrinking below its width:
If you switch to flex-shrink, you'll notice that the second div becomes slightly smaller. If you want to make the div even smaller, you can use an arbitrary value like this: flex-shrink-[2].
Finally, if you want to alter how your Flexbox wraps, you can use flex-wrap, flex-wrap-reverse, or flex-nowrap. Try switching flex-wrap to flex-wrap-reverse to see how the page updates:
And that's it!
This was a quick overview of how to use Flexbox with Tailwind. Hopefully, this makes it easier for you to build awesome responsive designs using Tailwind!