A Comprehensive Tutorial On Creating Equal Height Sidebars Using Flexbox

A Comprehensive Tutorial On Creating Equal Height Sidebars Using Flexbox

For those who have been into web designing field for quite a while must be aware of certain things which aren’t actually simple to do with CSS such as creating columns of equal heights. Variety of methods do exist to help us overcome this issue and one of them come in the form of Flexbox.

 

The flexible box layout module or we can say “Flexbox” is really a cool part of the W3C working draft. The module aims to provide a speedy and logical way of creating layout, alignment, and also distribute elements and space within the container, regardless of their size. I would like you to share my knowledge about this module, because very soon it’s going to expand its reach and will help you gain efficiency in your workflow.

Foundations-of-Front-End-Development-Course

The primary goal behind the working of flex layout is to give container with an ability to adjust its width/height and other related components automatically to gracefully fill the available space. Not only fill, but also shrinks them accordingly to prevent overflow.

In this tutorial, I will experiment with Flexbox and will show you how it can be used to create equal height sidebars. The guide is easy to follow and will surely help you in achieving your goals. So, here is how we can go about it.
[adsense]

 

Getting Started with Flexbox

I have already explained you what Flexbox is in the above section so I will not go into the details. Here we will take a more practical approach, and will start using it directly.

 

2

 

So, here is the HTML:

 

<section id=”wrapper”>

<div id=”content-area”>

<!– The content of the page will go here –>

</div>

<div class=”sidebar”>

<!– This is the sidebar –>

</div>

</section>

 

Using Flexbox requires #content-area div and the #sidebar, next to each other of equal heights, no matter what content they have to hold. Also, we need to make the page responsive too, so there will be no change in the width, but within the main element so that it can be contracted or expanded to fill the space. Lastly, on small screens, the sidebar moves beneath the main content.

For this, first enable the Flexbox by using the following command:

#wrapper {

display:flex;

}

The above mentioned command is helpful in converting the #wrapper element into a flex container. First of all, it will appear as a block level element, and then it will convert all the items residing inside it into flex items. It’s a crucial process because it allows our both content as well as sidebar to act like flex items, so that the browser would seamlessly expand the page until it completely fills the unused space.

Next, we are required to assign the maximum width to the #wrapper element. Here I am assigning it1200px width, and placing the element at the center. This is how we can go about it.
#wrapper {

display:flex;

 

/* Centering the page */

max-width:1200px;

margin:0 auto;

}

 

Once you are done with this, it’s time to move on to the next step wherein we have to define the widths of the #content-area element and the sidebar.
#content-area {

/* This makes the element grow and take all available space, not taken by the sidebar */

flex-grow:1;

}

.sidebar {

/* Give the sidebar a default width, and prevent it from shrinking */

flex-shrink:0;

width:280px;

}

We are almost done with the layout. Now, whenever the content of the #content-area page expands, it will also enlarge the #wrapper, which would further allow it to get enlarged from sides. Now, to render the small screens we have to make a sidebar that goes below the main content. We will make use of media query for this.

 

@media all and (max-width: 800px) {

#wrapper {

flex-flow:column;

}

/* Make the sidebar take the entire width of the screen */

.sidebar {

width:auto;

}

}

 

The above line used Flex-flow, which is a parent flex container element. This is actually a shorthand flex-direction and flex-wrap properties. The elements together define the flex container’s main and cross axes. The default value is “row nowrap”. Row is helpful in displaying the element together. Since, here we are targeting at small screens, we better opt for vertical orientation, which will move the side bar under the main content.

Congrats! You are done.

See, it wasn’t that hard right? flexbox module is a straightforward way of building layouts for modern web pages by providing arrangements of elements to adapt any display space.

Posted in CSS
Don't Miss Out On Deals Or Updates!
Be the first to find out what Designrfix has to offer. Signup to our newsletter for all the latest Top Designer Resources, Tech Products and Giveaways.

Written by Sophia Phillips

Sophia Phillips has been working as a professional in WordPress development company and loves sharing information about leveraging multiple benefits of WordPress & designing in the best possible manner. Currently, she has an impressive count of WordPress related articles under her name.