DEV Community

Cover image for Pure CSS Flex Box Responsive Design - No Media Queries
TechSnack - Technology Tutorials
TechSnack - Technology Tutorials

Posted on • Updated on

Pure CSS Flex Box Responsive Design - No Media Queries

Responsive Design Doesn't Have To Be Hard

With Flex Box we can easily make our webpage act as a responsive container without media queries!

To start with we are going to quickly create a file with the following HTML inside of it



    <div class="viewport flex-parent flex-col">
        <div class="nav flex-parent space-around">
            <div class="box-1"></div>
            <div class="box-2"></div>
            <div class="box-3"></div>
        </div>
        <div class="content flex-parent">
            <div class="sidebar-left"></div>
            <div class="main-area"></div>
            <div class="sidebar-right"></div>
        </div>
        <div class="footer flex-parent space-evenly">
            <div class="box-4"></div>
            <div class="box-5"></div>
            <div class="box-6"></div>
        </div>
    </div>


Enter fullscreen mode Exit fullscreen mode

...and this is it for the HTML. That's our entire page!

Now the CSS

At this point the page is blank. We will fix that by styling it right now.

* CSS RESET

The first thing we will do is a basic reset to all of the elements in the document. This will set everything to border-box sizing and remove all margins and padding.



    *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }


Enter fullscreen mode Exit fullscreen mode

.viewport

We can now create the viewport class. We want this element to take up all available space within the device's screen.
Just to emphasize where the viewport is we will also give it a large black border (this is not necessary when you have inner content or other elements to display)



    .viewport{
        min-height: 100vh;
        min-width: 100%;
        border: 5px solid black;
    }


Enter fullscreen mode Exit fullscreen mode

Next we can make our viewport class responsive with the following class. .viewport is now a Flex Box container!



    .flex-parent{
        display: flex;
    }


Enter fullscreen mode Exit fullscreen mode

By default Flex Box containers display vertically but we would like our viewport flex-parent element to display horizontally. We can achieve this with the following flex property.



    .flex-col{
        flex-direction: column;
    }


Enter fullscreen mode Exit fullscreen mode

That's it for the flex box container.

Now we can begin creating the flex children.

.nav

The first child element will be .nav This is our general header area. Let's make the width 100% of the container's width and the height 20vh.



    .nav{
        min-width: 100%;
        min-height: 20vh;
        border: 5px dashed blue;
    }


Enter fullscreen mode Exit fullscreen mode

Since we want to place elements inside of .nav we will give it the class .flex-parent and we will also demonstrate a key aspect of Flex Box here.

The justify-content flex property

Empty space is crucial. If you have ever attempted to position something with pure CSS without the use of Flex Box or CSS Grids then you know how difficult this is to get right. Luckily, Flex Box has a property called justify-content that can do this for us in various ways.

.space-around

We are going use the following code to place the white space around each element.



    .space-around{
        justify-content: space-around;
    }


Enter fullscreen mode Exit fullscreen mode

.space-evenly

and while we are here we will make another class for later except using space-evenly which works similarly to space-around with one major difference. With space-evenly the white on the left of the furthest and the right of the furthest right elements will also be part of the spacing distribution!



    .space-evenly{
        justify-content: space-evenly;
    }


Enter fullscreen mode Exit fullscreen mode

The justify-content property deals with our main axis. Which in this case is the x axis or horizontal axis. this would act differently if this had a class of .flex-col. Go ahead and try it out!

.nav inner elements

Now we can go worry about the elements within .nav

I want to be able to easily change the value of one element without affecting another. For this we will create a different class for each element. This is not entirely necessary but will save stress down the road.



    .box-1{
        min-width: 20vw;
        background-color: yellow;
    }

    .box-2{
        min-width: 20vw;
        background-color: purple;
    }

    .box-3{
        min-width: 20vw;
        background-color: red;
    }


Enter fullscreen mode Exit fullscreen mode

Take a look! The content does not overflow from the page and everything inside of .nav scales with the screen size!

We can now style the rest of our elements!

First we will place .content and .footer onto the page

.content


<span class="nc">.content</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
    <span class="nl">min-height</span><span class="p">:</span> <span class="m">80vh</span><span class="p">;</span>
    <span class="nl">border</span><span class="p">:</span> <span class="m">5px</span> <span class="nb">dashed</span> <span class="no">orange</span><span class="p">;</span>
<span class="p">}</span>
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode




.footer



<span class="nc">.footer</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
    <span class="nl">min-height</span><span class="p">:</span> <span class="m">20vh</span><span class="p">;</span>
    <span class="nl">border</span><span class="p">:</span> <span class="m">5px</span> <span class="nb">solid</span> <span class="no">cyan</span><span class="p">;</span>
<span class="p">}</span>
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode




.content inner elements

.sidebar-left


<span class="nc">.sidebar-left</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">20%</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="no">teal</span><span class="p">;</span>
<span class="p">}</span>
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode




.main-area



<span class="nc">.main-area</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">60%</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="no">green</span><span class="p">;</span>
<span class="p">}</span>
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode




.sidebar-right



<span class="nc">.sidebar-right</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">20%</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="no">blue</span><span class="p">;</span>
<span class="p">}</span>
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode




.footer inner elements



<span class="nc">.box-4</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">15%</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="no">pink</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.box-5</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">30%</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="no">maroon</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.box-6</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">20%</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="p">}</span>
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode




The Results

Desktop

Desktop View - Navbar and Content AreaDesktop View - Content Area and Footer

Tablet

Tablet View - Navbar and Content AreaTablet View - Content Area and footer

Mobile

Mobile View - Navbar and Content AreaMobile View - Content Area and Foote

Final Thoughts

If you made it this far thank you! I hope you have a better understanding of what Flex Box is and how it can better help us make responsive designs easily without stressing too much.

This was a bonus article today. Stay tuned for an Intro to Version Control later!

Help TechSnack Write Concise Content:

Leave us a comment with your thoughts on the article below. Whether you liked or disliked the article, all feedback will help me to know how to better create content that meets your needs, goals and aspirations.

Sharing the article on your social platforms would also be a great help!

Follow TechSnack on Twitter

Join the conversation at r/TechSnack

Top comments (14)

Collapse
 
afif profile image
Temani Afif

but the in the mobile version, you blocks are very narrow. Add some content inside them and things will get scrambled.

Collapse
 
techsnack profile image
TechSnack - Technology Tutorials • Edited

This is true. That is why I say to experiment around with the max-width property.
If I have time today I will further update this post to demonstrate a better mobile view.

Collapse
 
mirelaprifti profile image
Mirela Prifti

You can wrap them on smaller screens

Collapse
 
afif profile image
Temani Afif

max-width will not help you because you are dealing with elements getting smaller not getting bigger.

Thread Thread
 
techsnack profile image
TechSnack - Technology Tutorials

Thank you, you are correct. As I have been experimenting with it myself. I will revise what I say in the article and continue to work out the final portions.

Collapse
 
garyinbg profile image
Gary Rowlands

This is a very nice introduction thank you. My girlfriend has a job building sites in WordPress using the Oxygen builder. I deal more with embedded systems but found myself getting very familiar with HTML 5 and CSS3.

These responsive elements are really useful to know more about

Collapse
 
techsnack profile image
TechSnack - Technology Tutorials

Thank you for the kind words.

Its true that with WordPress the actual HTML5 and CSS3 elements are buried and often may not even be seen by the developer. However, if you choose to develop a child theme or even a stand alone custom theme, these responsive design elements become huge!

P.S. - Even easier with a pre-compiler like SASS

Collapse
 
passivetools profile image
PassiveTools

Totally improved my thoughts about flexbox.
Thank you for a beautiful piece of info

Collapse
 
techsnack profile image
TechSnack - Technology Tutorials

Thank you for your beautiful words of encouragement! This is the very thing that will keep my drive up for writing articles.

Flexbox gets a bad wrap (pun intended) because CSS Grids are slightly easier to understand. But, it is powerful enough that many WordPress themes are built with flex rows and columns.

Collapse
 
kasir-barati profile image
Mohammad Jawad (Kasir) Barati

Side comment, maybe you could introduce us some websites where we can use and utilize our CSS flexbox knowledge in a more practical way. Like IDK "design this page with CSS flexbox and here is the final HTML/CSS" so that you could practice and compare your solution to theirs so that you can know somehow you're on the right track.

You know what I mean, right?

Collapse
 
cuellar22 profile image
RAUL CUELLAR MORENO

Great!

Collapse
 
ismailisimba profile image
Ismaili Simba

If you add the wrap property, you can have your rows turn into columns on smaller screens.

Collapse
 
techsnack profile image
TechSnack - Technology Tutorials

Sounds like I have something to try out. Thank you!

Collapse
 
techsnack profile image
TechSnack - Technology Tutorials