# How to Use CSS Flexbox with Tailwind: An Interactive Guide
%%[kempo]
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:
```xml
```
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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox#there_is_no_justify-self_in_flexbox).
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!