TailwindCSS Flexbox. Free UI/UX design course
Tags: tailwindcss, ui, uidesign, tutorial
Published: 2024-07-03 09:59:34

## Flexbox

It's time to take a look at another famous Tailwind CSS tool - flexbox.

In fact, flexbox itself is not a creation of Tailwind, but simply CSS, but thanks to Tailwind, we can comfortably use flexbox using the class utilities.

But enough talk, let's explain it better with examples.

## Step 1 - add headings

Our Hero Image is impressive, but since it contains no content, it is of little use.

We need to add some kind of **Call to action**. One big heading and one subheading should be enough for now.

Let's do it. Inside the _div_ with our **Hero Image**, let's add another div with headings inside.

**HTML**
```
<!-- Background image -->
<div
  class="h-screen bg-cover bg-no-repeat"
  style="margin-top: -56px; background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
  <!-- Call to action -->
  <div class="pt-20">
    <h1>I am learning Tailwind</h1>
    <h2>And what an exciting adventure it is!</h2>
  </div>
</div>
<!-- Background image -->
```

They appear in the upper left corner of the screen and are covered by the Navbar, so we need to add padding with _.pt-20 class_ to see anything at all. This is definitely not a satisfactory solution.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wacd7h7y45c8oo7zdnz4.png)

We have to figure out a way to perfectly center them horizontally and vertically. Regardless of the size of the screen, we want our **Call to action** to appear in the **center**.

Difficult task. But fortunately, we have **flexbox** at our disposal, thanks to which we will deal with it in the blink of an eye.

## Step 2 - add flexbox

First, we need to place our Call To Action in an outer _div_ that will handle flexbox.

**HTML**
```
<!-- Background image -->
<div
  class="h-screen bg-cover bg-no-repeat"
  style="margin-top: -56px; background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
  <!-- Wrapper for flexbox -->
  <div>
    <!-- Call to action -->
    <div class="pt-10">
      <h1>I am learning Tailwind</h1>
      <h2>And what an exciting adventure it is!</h2>
    </div>
  </div>
</div>
<!-- Background image -->
```

Then we need to **enable flexbox**. We do this by adding the _.flex class_ to the outer wrapper _div_.

**HTML**
```
<!-- Wrapper for flexbox -->
<div class="flex">
  <!-- Call to action -->
  <div class="pt-10">
    <h1>I am learning Tailwind</h1>
    <h2>And what an exciting adventure it is!</h2>
  </div>
</div>
```

So far, so good, but nothing changes after we save the file.

And that's because enabling flexbox is only the first step. Now we need to choose one of the many available options to define how exactly we want to align given elements.

**Horizontal alignment**
To center elements horizontally, we use the justify-center class. Let's add it next to the _.flex_ class.

**HTML**
```
<!-- Wrapper for flexbox -->
<div class="flex justify-center">
  <!-- Call to action -->
  <div class="pt-10">
    <h1>I am learning Tailwind</h1>
    <h2>And what an exciting adventure it is!</h2>
  </div>
</div>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8m970clpw5sen5blg5z.png)

**Vertical alignment**
To center elements vertically, we use the items-center class. Let's also add it next to the _.flex_ class.

**HTML**
```
<!-- Wrapper for flexbox -->
<div class="flex items-center justify-center">
  <!-- Call to action -->
  <div class="pt-10">
    <h1>I am learning Tailwind</h1>
    <h2>And what an exciting adventure it is!</h2>
  </div>
</div>
```

After saving the file, it will turn out... that nothing has changed 🤔

However, if you look closely, you'll see that's not true - vertical centering worked as well.

The problem, however, is that the height of the _div_ on which we run flexbox is only as high as the height of the elements it contains. As a result, there is no visual effect of vertical centering.

## Step 3 - set a height

Let's do an experiment - let's add the _bg-red-500 class_ to the _div_ with our flexbox, which will give it a red background. Thanks to this, we will be able to see its actual height.

**HTML**
```
<!-- Wrapper for flexbox -->
<div class="flex items-center justify-center bg-red-500">
  <!-- Call to action -->
  <div class="pt-10">
    <h1>I am learning Tailwind</h1>
    <h2>And what an exciting adventure it is!</h2>
  </div>
</div>
```

Look at the red rectangle - the _flexbox div_ ends and begins exactly where its contents end and begin - in this case, **Call to action** elements.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63l3y1flgb2pou21oc2o.png)

To extend the flexbox div to the full height of our Hero Image, we need to set its height equal to 100% of the available space.

This is very easy to do with Tailwind. Just add the _.h-full class_ to the flexbox _div_ ("h" for height, so h-full = height: 100%).

**HTML**
<!-- Wrapper for flexbox -->
<div class="flex h-full items-center justify-center bg-red-500">
  <!-- Call to action -->
  <div class="pt-10">
    <h1>I am learning Tailwind</h1>
    <h2>And what an exciting adventure it is!</h2>
  </div>
</div>

After saving the file and refreshing the browser, you will see that this time Call to action is centered both horizontally and vertically.

You can **remove** the _.bg-red-500_ class. It only served us to demonstrate the height of the flexbox div, so we don't need it anymore.

We still have a lot to improve on our **Call to action **(like poor visibility), but we'll cover that in the future lessons.

Regarding flexbox - in this lesson we have learned only the basic functionalities. We will cover advanced topics many times in the future, because flexbox is useful in virtually every project.

_**Note:** If you want to practice on your own and have a look at more examples you can play with our **[flexbox generator](https://www.designtoolshub.com/tailwind-css/flexbox-generator)**._

**[DEMO AND SOURCE CODE FOR THIS LESSON](https://tw-elements.com/snippets/tailwind/ascensus/5324955)**