TW Elements - Flexbox. Free UI/UX design course

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.

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.

<!-- 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.

<!-- 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 centre elements horizontally, we use the justify-center class. Let's add it next to the .flex class.

<!-- 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>

Vertical alignment

To centre elements vertically, we use the items-center class. Let's also add it next to the .flex class.

<!-- 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.

<!-- 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.

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%).

<!-- 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.

Demo and source code for this lesson