How to Create Equal Height Columns in Web Layout Using Flexbox?

Want create site? Find Free WordPress Themes and plugins.

While creating multi-column websites, the classic CSS issue arises, i.e., columns with irregular height. You have great content no doubt, but all your efforts go for a toss when it ends up looking like this.

Flexible box Layout

And untidy mess, where all the columns are of different heights, depending on the content of each.

When it should look like this.

Flexbox Columns the Solution

The height of all the columns, accommodate to suit the height of the tallest column. That’s what you call picture perfect.

After going through and a number of tutorials to figure this out. I finally found the solution – Flexbox, for responsive design, which made most complicated layout issues seem petty.

What is Flexbox?

A layout mode in CSS3, Flexible Box Layout Module makes sure that all the columns on the page behave predictably. CSS Flexbox does not use floats and the container margin does not collapse with the margin of its contents.
Flexbox CSS enables the container to alter the width, height, and order of the item. It accommodates to all kinds of devices and screen sizes, expands items to fill the screen, and is supported by most browsers.

Here’s how you take full advantage of the flexbox layout mode.

1) First, we start with three columns.

CSS code for 3 columns

<style>
.container {
max-width:1400px; margin:0 auto; display:flex; justify-content:space-between;
}
.wrap {
padding:20px;margin-bottom:20px;margin-top:20px;flex-basis:30%;box-sizing:border-box;
}
.wrap:nth-child(1){background-color:#c0dbe2;}
.wrap:nth-child(2){background-color:#cdf1c3;}
.wrap:nth-child(3){background-color:#ccb9da;}
</style>

 

 

 

HTML Code for 3 columns

&lt;!—Three column box start--&gt;

box1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,

 

box2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

 

box3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<!—Three column box end–>

Flexbox CSS3 example, what the columns look like once implemented.

 

Flexbox Layout Three Column

 

2) The second step is the Equal height container.

CSS Code for Equal Height container

<style>
.equal-height-container {
max-width:1400px;
margin:0 auto; display:flex;
}
.first{
background-color:#F0F8FF;
padding:20px; flex:1;
}
 
.second{
background-color:yellow; flex:1; display:flex; flex-direction:column;
}
 
.second-a{
background-color:#FFB6C1; flex:1; padding:20px;
}
.second-b{
background-color:#cdf1c3;flex:1;padding:20px;
}
</style>

 

 

HTML Code for Equal Height Container

&lt;!—Section Start--&gt;

Heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

 

Column 1

 

Column 2

<!—Section End–>

Flexbox example, what equal height containers look like, once implemented.

 

Using Flexbox Equalheight

 

3) A Complete Responsive Flexbox Layout

&lt;!doctype html&gt;
Responsive layout Using Flexbox
 
 
 
<style>
body{margin:0; background-color:#cccccc;font-family:arial; text-align:justify;}
header{order:1; font-family:arial; display:flex; height:100px;max-width:1400px; margin:0 auto; background-color:#FFE4C4;}
footer{ order:5; font-family:arial; display:flex;height:100px;max-width:1400px; margin:0 auto; background-color:#FFE4C4;}
 
.container {
max-width:1400px; margin:0 auto;
}
.wrap{
padding:20px;margin-bottom:20px;margin-top:20px;flex-basis:30%;box-sizing:border-box;}
.wrap:nth-child(1){background-color:#c0dbe2;}
.wrap:nth-child(2){background-color:#cdf1c3;}
.wrap:nth-child(3){background-color:#ccb9da;}
 
.center-text{color:#000000; font-size:30px; margin:auto;}
.equal-height-container {
max-width:1400px;
margin:0 auto; display:flex;
}
.first{
background-color:#F0F8FF;
padding:20px; flex:1;
}
 
.second{
background-color:yellow; flex:1; display:flex; flex-direction:column;
}
 
.second-a{
background-color:#FFB6C1; flex:1; padding:20px;
}
.second-b{
background-color:#cdf1c3;flex:1;padding:20px;
}
@media(min-width:900px)
{
.container{
display:flex; justify-content:space-between;}
 
}
</style>

<!—Header Start–>

Header

 

<!—Header Start–>

Header

 

<!—Header End–> <!—Section Start–>

Heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

 

Column 1

 

Column 2

<!—Section End–> <!—Three column box start–>

box1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

 

box2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</>

 

box3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</>

<!—Three column box end–> <!—Footer Start–>

Footer

<!—Footer end–>

Flexbox example, what it looks like when implemented.

Flexbox Layout

 

That’s all for today! Let us know how you get on!

Did you find apk for android? You can find new Free Android Games and apps.

Tags

Related Posts

Leave A Comment