DEV Community

Manan Gouhari
Manan Gouhari

Posted on

How do you build houses with Flexbox?

I recently learned Flexbox, now it's time to give a practical demonstration for you people, the lovely DEV Community.

A layout is a website's house😂

Let's build this blog layout.

sample layout

Now let's think of this step by step.

Alt Text
Nav covers approximately 1/10th area of the whole screen vertically and the rest of it goes to the main area.

<body>
<nav>NAV</nav>
<main>MAIN</main>
</body>
Enter fullscreen mode Exit fullscreen mode

Styles -

*{
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
}
nav{
    flex-grow: 1;
}

main{
    flex-grow: 10;
}
Enter fullscreen mode Exit fullscreen mode

First, on the body we add display: flex, this is necessary as flexbox has to be activated on the parent container, to layout the elements inside it using flexbox.
Now there are two main ways flexbox can be aligned, row or column. Row is horizontal, column is vertical.
In this case, we want them horizontally aligned so we add flex-direction: row
Now talking about flex-grow, it defines how much the item will grow relative to the other elements in the flex container.
We want the main area to take up 10x space compared to the nav so we add flex-grow: 10 to main and flex-grow: 1 to nav.

Another point to keep in mind, the flex properties of the parent container concerns only its direct children, not the elements inside the children elements.
Now moving on to the main area, this is what we want to do -

MAIN ALIGN
Now, what would we do to achieve it?

Both header and content are children of the main, we need to turn flexbox on, on main element.

header and content are aligned vertically, i.e. in a column with header taking up about 1/8th space and rest of it to the content container.

<body>
    <nav>NAV</nav>
    <main>
        <header>HEADER</header>
        <section class="content">CONTENT</section>
    </main>
</body>
Enter fullscreen mode Exit fullscreen mode
/* styles */
main{
    flex-grow: 10;
    display: flex;
    flex-direction: column;
}
header{
    flex-grow: 1;
}
.content{
    flex-grow: 8;  
}
Enter fullscreen mode Exit fullscreen mode

When you see the first layout image, you'll notice the posts area and aside are under the .content area, so now we gotta turn up the flex on .contents
container. This is how we want it to be -

Final Mock

        <section class="content">
            <section class = "posts">
            POSTS
            </section>
            <aside>ASIDE</aside>
        </section>
Enter fullscreen mode Exit fullscreen mode
.content{
    flex-grow: 8;   
    display: flex;
}

.posts{
    flex-grow: 5;
}
aside{
    flex-grow: 1;
    height: 40vh;
}
Enter fullscreen mode Exit fullscreen mode

Again, following the same drill that we've in the previous parts of this layout added display: flex to .contents and then decided what proportions should its children be in by using flex-grow.
Now moving onto the last part of this layout,
the individual posts under the .posts container. I think this is the simplest one out of all others in this tutorial till now.
Alt Text
Now .posts will be our parent flex container.

            <section class = "posts">
                <section class="post">POST</section>
                <section class="post">POST</section>
                <section class="post">POST</section>
            </section>
Enter fullscreen mode Exit fullscreen mode
.posts{
    flex-grow: 5;
    display: flex;
    flex-direction: column;
}

.post{
    flex-grow: 1;
}
Enter fullscreen mode Exit fullscreen mode

All we gotta do is turn up the flex on .posts and specify flex-direction to column. We specif flex-grow: 1 on .post to indicate that each post should take up equal space, there are other ways to do this too, by using justify-content and align-items but I find flex-grow to be the most intuitive.

Now that we're done with our layout, here's the final code -

<body>
    <nav>NAV</nav>
    <main>
        <header>HEADER</header>
        <section class="content">
            <section class = "posts">
                <section class="post">POST</section>
                <section class="post">POST</section>
                <section class="post">POST</section>
            </section>
            <aside>ASIDE</aside>
        </section>
    </main>
</body>
Enter fullscreen mode Exit fullscreen mode
*{
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
}
nav{
    flex-grow: 1;
}

main{
    flex-grow: 10;
    display: flex;
    flex-direction: column;
}
header{
    flex-grow: 1;   
}
.content{
    flex-grow: 8;    
    display: flex;
}

aside{
    flex-grow: 1;
    height: 40vh;
}

.posts{
    flex-grow: 5;
    display: flex;
    flex-direction: column;
}

.post{
    flex-grow: 1;
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

Once you understand flexbox, building layouts in it comes to you almost intuitively. The best tip to get better at it is to practice.
Top-down approach works very well with Flexbox, first think of your major containers, how are they related and then the content inside them, step by step.
There's much more to flexbox that hasn't been explored in this post like justify-content, align-items, flex-basis, flex-shrink etc. Go on explore!

Side note - Of course for a normal layout, there would be padding, margin, and colors involved which were forgone in this post for the sake of focusing solely on flexbox.

Discussion (11)

Collapse
longinteger0 profile image
Long Shong

Have always been using CSS Grid and never thought I should take a look on flexbox. But after reading your tutorial and seeing how easy it is I shall use that in my next project. Thank you for this detailed and compact tutorial.

Collapse
manangouhari profile image
Manan Gouhari Author

glad you found it helpful!

Collapse
monfernape profile image
Usman Khalil

You dissect the case so well. Kudos

Collapse
manangouhari profile image
Manan Gouhari Author

thank you!

Collapse
naimlatifi5 profile image
Naim Latifi

Great and very well explained article. Thanks for sharing!

Collapse
manangouhari profile image
Manan Gouhari Author

you're welcome!

Collapse
irfan54674346 profile image
Irfan

I have never found such a clear explanation of flex box. Thank you so much ❤️💕.
Could you please create a post about  justify-content, align-items, flex-basis, flex-shrink etc.
Thanks 😊

Collapse
manangouhari profile image
Manan Gouhari Author

I am so glad you found this post helpful. I'll definitely look into making a blog about the topics that you mentioned :)

Collapse
edwinboon profile image
Edwin Boon

Great article! Helped me a lot. Thank you

Collapse
manangouhari profile image
Manan Gouhari Author

you're welcome!

Collapse
docsmin profile image
docsmin

that was explained really well !! really helpful post !!