Nested flexbox

In the previous tutorial, we used flexbox to center content vertically and horizontally.

In this lesson, we will learn how to create a complex layout by embedding one flexbox into another.

Step 1 - add main headings

Let's add a main heading to the first column in our intro. We covered text styling in one of the previous lesson, so I won't go into it in detail.

As you can see, we put our headings in an empty div that we will use for the flexbox (which in the next steps we will put in another flexbox, creating a nexted flexbox).

John Doe

Web developer

Step 2 - center the content using flexbox

Using the flexbox classes we learned in the previous tutorial, let's center the content vertically by adding these classes to the div we have prepared for flexbox.

We will deal with horizontal centering in the next steps.

Step 3 - add CTA (Call to Action) elements

Below the flexbox wrapper for headings we will add another div with a few more elements: a GitHub icon, a divider and a button (we covered all these things in the previous tutorial, so I won't dwell on it here).

Now Our CTA has landed in the lower left corner of the screen. Let's fix it.

Step 4 - fix CTA elements

Now we need to make the CTA elements line up horizontally in one line.

So we need to add another flexbox, this time to the wrapper containing the CTA. We've already prepared an empty div for adding the appropriate flexbox classes, so let's do that right away.

To the <!-- Inner flexbox wrapper for CTA elements --> add classes .flex, .items-center, .justify-between, .px-10, .pb-8.

We've used all of these classes before. The only new feature is the justify-between class.

The .justify-between class in Tailwind CSS is used to justify the content of a flex or grid container by distributing the space evenly between the start and end edges of the container. This means that the content will be spread out evenly, with equal margins on either side.

Also worth noting is the use of the .items-center class. Without it, the elements will be unevenly arranged according to each other.

Adding the .items-center class will center the elements vertically.

Step 5 - add one more flexbox

Now something tricky - we want the headings to stay in the center, but move CTA elements to the bottom edge of the screen. At the same time, we don't want the CTA elements to protrude beyond 100% of the screen height, as it is now. Everything has to fit in a single view.

To achieve this, we need to put our current flexbox wrappers into one external flexbox wrapper.

Now everything seems even more messed up, but don't worry - we'll fix it soon.

Let's start by giving the outer wrapper a height of 100% to be able to stretch its content. Next, let's add flexbox classes to center everything horizontally and vertically.

After saving the file, you will see a terrible mess. However, contrary to appearances, everything worked as it should and we are very close to the final solution.

Step 6 - change the direction of the flexbox

By default, the flexbox is set horizontally, as you can see in our intro - all elements are arranged in one line instead of one below the other.

We can easily fix this by changing the direction of the flexbox from horizontal to vertical.

Just add the .flex-col class to the outer flexbox wrapper:

And now it works (almost) perfect instead of horizontally, our flexbox changed from default to vertical, aligning from top to bottom instead of left to right.

We just need to make a little adjustment to our CTA. To stretch them to full width again, let's add the .w-full class to the CTA wrapper.

Now it's exactly how it should be!

Huh, that was crazy. Flexbox next to flexbox inserted into another flexbox.

For complex concepts such as nested flexbox, there is no better way to consolidate knowledge than simply experimenting. Before moving on to the next lesson, play around with our new intro - add and subtract individual flexbox classes to see what happens.

And if something in the tutorial is not clear, hit me up on twitter!

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
Prev Next
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.