DEV Community

loading...
Cover image for Learn and Master Flexbox by building commonly used web components

Learn and Master Flexbox by building commonly used web components

David Asaolu
Front-end Developer
・4 min read

Hello, welcome to this tutorial. Today, I will be explaining how to build commonly used web components with Flexbox.

After the introduction, I will walk you through building the following:

  • A navigation bar
  • A contact card
  • A credit card checkout page

So let's jump right into it! 🚀

Introduction

Flexbox model provides an efficient way to layout, align and arrange elements on a webpage. Learning flexbox may seem to be a pain in the butt at first for some people, but once you get familiar with it, applying it will be a harmless and enjoyable ride.
I also use flexbox in all my projects and it's been awesome!

Let's learn some rudiments:

1. display: flex

Don't panic! 😨 This is a CSS attribute that you assign to the parent container in order to use flexbox. For instance, if you have

<main id="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </main>
Enter fullscreen mode Exit fullscreen mode

The "main" tag is the parent element, also known as the flex container.
Note that, this attribute aligns the children elements inline by default, that is lay them side by side (from left-right). The children can also be referred to as flex items.

Flexbox

2. flex-direction : row || flex-direction : column || flex-direction : column-reverse || flex-direction : row-reverse

I guess this is self-explanatory already.

Flex-direction : row - This is the default arrangement of flex-items, when display : flex is assigned to the parent element.

Flexbox - flex-direction : row

Flex-direction : column - The flex-items (children elements) are arranged from top to bottom within the parent element.

Flexbox - flex-direction : column

Flex-direction : row-reverse - In this case, the children elements are still arranged from left-right, but the arrangement of the flex items begins from last flex-item to first flex-item.

Flexbox - flex-direction : row-reverse

Flex-direction : column-reverse - The flex-items are in column, but in a reverse order, similar to the row-reverse.

Flexbox - flex-direction : column-reverse

3. justify-content : flex-start || justify-content : flex-end || justify-content : center || justify-content : space-between || justify-content : space-around

If you are already familiar with the float attribute, justify-content is quite similar to the float attribute but with some added functionalities.

justify-content : flex-start - this attribute aligns the flex items to the left axis within the parent element.

Flexbox - justify-content : flex-start

justify-content : flex-end - this aligns the flex items to the right axis within the parent element.
Flexbox - justify-content : flex-end

justify-content : center - this aligns the flex items at the center of the parent element.

Flexbox - justify-content : center
justify-content : space-between - aligns the flex items such that equal amount of space is available BETWEEN them.

Flexbox - justify-content : space-between

justify-content : space-around - aligns the flex items such that equal amount of space is available AROUND them.

Flexbox - justify-content : space-around

4. align-items : flex-start || align-items : center || align-items : flex-end

They are similar to justify-content, the difference is that justify-content align elements on the horizontal axis, while align items align elements vertically.

align-items : flex-start
Flexbox - align-items : flex-start

align-items : center
Flexbox - align-items : center

align-items : flex-end
Flexbox - align-items : flex-end

TLDR : The properties listed are limited to those needed to complete the projects listed in this tutorial. You can learn about other attributes here or here

Let's Build! 🚀

From what you've learnt so far, try out this web layouts

1. A simple check out page

A checkout page

Check Solution

2. A contact page

A contact page

Check Solution

3. A Navigation bar

Navigation Bar

Check Solution

Did you enjoy this tutorial or have any questions? Feel free to drop your comments below and connect with me on Twitter

Discussion (2)

Collapse
jelili profile image
Jelili Ayorinde

I have not finished this tutorial though, but what I have read so far shows that this author really know this subject, his teaching methodology is first class, as he explained each topic step-by-step without digressively skipping a step. To make the whole tutorial fantastic, he hypothetically explained each step in the tutorial. I give you 5*

Collapse
arshadayvid profile image
David Asaolu Author

Wow!! 😍
Thank you so much for your kind words 🤗