Matt Lambert

Check out my blog, or sign up to receive articles by email.

Equal Height Columns Using Flexbox

By admin on March 11th, 2015 in CSS3

Do you hate equal height columns? In the past they have been the bane of my existence. They columns need to be equal height? Let’s just redo the layout so they don’t haha. Rejoice Flexbox has arrived and we no longer need to fear the columns! Below is a simple explanation of how you can achieve this holy grail of web design techniques.

Check out the demo at http://jsfiddle.net/cardeo/j5yf70d9/

The HTML

<div class="parent">
  <div class="child">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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

We need to setup a simple set of divs. Create a wrapping div and give it a class of parent. Within that div create 3 more and give them a class of child. Within those divs, give each a different amount of copy.

The CSS

.parent {
  display: flex;
}

.child {
  width: 200px;  /* Or whatever */
  flex: 1;
  background: #ccc;
  margin: 10px;
}

On the parent div we want to set the display property to flex which will initialize our collection of flexible columns. For the child divs we need to give them a width which can be whatever you want. The flex property should be set to 1. I’d recommend setting a background color so you can confirm that all the columns are the same height. Also add a little margin of 10px so there is some space between each column. That’s all you need to do. If you haven’t already take a look at the demo at http://jsfiddle.net/cardeo/j5yf70d9/

If you’re interested in learning more about CSS3, check out my eBook the CSS3 Handbook

Like what you read? Check out my store over at Creative Market to support the blog and help keep the lights on. Files starting from only $2.