loading...
Cover image for Master Flexbox in 12 Minutes with Most Common Use Cases

Master Flexbox in 12 Minutes with Most Common Use Cases

nghiemthu profile image Thu Nghiem Updated on ・3 min read

One problem with many tutorials is that they try to teach you everything and forget to tell you WHEN and WHY to use it.

In this tutorial, I am going to show you the most common use-cases of Flexbox, and with that, you will learn everything needed for future projects.

We will learn flexbox by solving 8 tasks which are 8 most common use cases of Flexbox.

You can download the starter and follow along here:

Flexbox-Tutorial-Starter

You can find the tutorial here:

__________ 👾 SPOILER ALERT __________

1: Align block elements horizontally

Just by saying:

.container {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

all the block elements will be aligned on the horizontal axis.

Alt Text

2: Center item(s)

One of the most use cases of Flexbox that I use a lot is:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

This will center the item on both the horizontal and vertical axis.

Alt Text

3: Distribute space between items

Another common use of Flexbox is

.container {
  display: flex;
  justify-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

It will put equal space between items.

One example is navigation items:

Alt Text

4: Push items to the bottoms

Here I will show 3 options:

With 2 items, we can use justify-content: space-between;, it will push the first item to the start and the last item to the end.

.container {
  display: flex;
  justify-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

You can see in the example when we only have the logo and the button:

Alt Text

or logo and navigation items:

Alt Text

With more than 3 items, adding flex-grow: 1 between items is my choice:

  <div class="option-2">
     <div class="container">
        <div class="item sm"></div>

        <div class="item"></div>

        <div class="space"></div>

        <div class="item"></div>
        </div>
  </div>
Enter fullscreen mode Exit fullscreen mode
  .option-2 .space {
    flex-grow: 1;
  }
Enter fullscreen mode Exit fullscreen mode

and we will have:

Alt Text

You might see it in more complex navigation like:

Alt Text

We can also give the first item flex-grow: 1

  .option-3 .item:first-child {
    flex-grow: 1;
  }
Enter fullscreen mode Exit fullscreen mode

By doing this, the first child will expand as much as possible and we will have:

Alt Text

Few examples in input components:

Alt Text

5: Build Relative Size Column

Just by giving the item a flex value: flex: {number}, we will be able to control the space of the item relative to other items that have flex value. For example:

.task-5 .item-1 {
  flex: 3;
}

.task-5 .item-2 {
  flex: 1;
}

.task-5 .item-3 {
  flex: 1;
}

.task-5 .item-4 {
  flex: 1;
}
Enter fullscreen mode Exit fullscreen mode

We will have:

Alt Text

This is useful for example in table layout:

Alt Text

6: Build a Responsive layout with and without media query

By just using:

.task-6 .container {
  display: flex;
  flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

we will have a responsive layout where items will not try to shrink inside the container.

and we can have 2 column layout by:

.task-6 .item {
  flex-basis: 50%;
}
Enter fullscreen mode Exit fullscreen mode

or 4 column layout if the screen is wider than 375px:

@media (min-width: 375px) {
  .task-6 .item {
    display: flex;
    flex-basis: 25%;
  }
}
Enter fullscreen mode Exit fullscreen mode

7: Change order (not common)

We can change the order of the item by giving it:

.task-7 .item-1 {
  order: 1;
}
Enter fullscreen mode Exit fullscreen mode

by default, the order is equal to 0 and it can take a minus number

8: Change position of the item (not common)

The item inside the flex can change position by itself by saying

align-self: auto | flex-start | flex-end | center | baseline | stretch;
Enter fullscreen mode Exit fullscreen mode

That's it, you can check out the full tutorial in youtube, but I hope this help understand and learn Flexbox

__________ 🐣 About me __________

Discussion

pic
Editor guide
Collapse
madza profile image
Madza

I see great things for your youtube channel 😉
Love your coding style and the way you explain concepts 😉 Also good job on devchallenges.io, great future potential 👍

Collapse
nghiemthu profile image
Thu Nghiem Author

haha thank you so much @madza . Did you change your name? :)

yeah, I am doing everything for fun now. Hopefully, there is a great future :)))

Collapse
madza profile image
Madza

Hahaha, it's always been Madza, tho I'm used to many people mistake me for a Japanese car manufacturer 😂😂 Even Grammarly suggests me to fix it here atm, while I'm writing it 🤣🤣

Collapse
ravigithub profile image
Ravi Kasireddy

So seductive, i would like to give you a million likes!

Collapse
nghiemthu profile image
Thu Nghiem Author

So you want to see more? 😉

Haha, joking aside, thank you so much!

Collapse
shikkaba profile image
shikkaba

Hi! Just wanted you to know that putting a div in as a space in the navigation is not necessary.

Just put margin-left: auto on the item you want on it's own.

Example: codepen.io/shikkaba/details/QWyQpxJ

Collapse
nghiemthu profile image
Thu Nghiem Author

Yeah but in my mind, margin auto should be in different video and this is one about flex so I want to show the trick that I use. but thanks for sharing

Collapse
vkolencik profile image
vkolencik

I love that you don't explain just the "how" but also the "why". Especially showing the real-life examples (navigation menu etc.) is what I was missing in most of the other tutorials. Thanks!

Collapse
nghiemthu profile image
Thu Nghiem Author

Thank you ;)

Collapse
gagansingh profile image
Gagandeep Singh

I liked the way you explained it. Keep it you!!!!

Collapse
adnanashraf77 profile image
Adnan Ashraf

Thanks for great explaination.