Pure CSS Flex Box Responsive Design - No Media Queries
Tags: webdev, html, css, 100daysofcode
Published: 2021-08-12 20:57:01


##Responsive Design Doesn't Have To Be Hard

{% codepen https://codepen.io/romesbergjames/pen/mdmaxGv %}

###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
```html
    <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>
```

...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.

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


###`.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)

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


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

```css
    .flex-parent{
        display: flex;
    }
```


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.

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


##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`.

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


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.

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

###`.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!

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


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.

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

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

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

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`

```css
    .content{
        min-width: 100%;
        min-height: 80vh;
        border: 5px dashed orange;
    }
```

###`.footer`

```css
    .footer{
        min-width: 100%;
        min-height: 20vh;
        border: 5px solid cyan;
    }
```

##`.content` inner elements


###`.sidebar-left`

```css
    .sidebar-left{
        min-width: 20%;
        background: teal;
    }
```

###`.main-area`

```css
    .main-area{
        min-width: 60%;
        background: green;
    }
```

###`.sidebar-right`

```css
    .sidebar-right{
        min-width: 20%;
        background: blue;
    }
```

##`.footer` inner elements

```css
    .box-4{
        min-width: 15%;
        background: pink;
    }

    .box-5{
        min-width: 30%;
        background: maroon;
    }

    .box-6{
        min-width: 20%;
        background: black;
    }
```


##The Results



###Desktop


![Desktop View - Navbar and Content Area](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xo15ap1e3d43gua9eox.png)![Desktop View - Content Area and Footer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dylthwd7f1y8lc63f9b.png)


###Tablet


![Tablet View - Navbar and Content Area](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qa9f670j1079j0q9mq4w.png)![Tablet View - Content Area and footer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs14hyp07hg2h5orpi2a.png)



###Mobile


![Mobile View - Navbar and Content Area](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e9gxcvb60klvy1bbkb8.png)![Mobile View - Content Area and Foote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrhvzjjiox7wu1em7310.png)



##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](https://twitter.com/RomesbergJames)


Join the conversation at [r/TechSnack](https://www.reddit.com/r/TechSnack/)