Summer of Me

Day 8 - Flexbox & Equal Height Columns

Jun 28, 2014

Today, I decided to change the layout of the homepage. The common problem is always, how do I create flexible, equal height columns? I was going to pick one of these tried and true methods and decided to use Flexbox in the end since there is now decent browser support.

It was pretty easy. No floats, no clearing child elements. My markup is a little different since I'm using Jekyll templating but here's some example code:

Example HTML

<div class="grid-container">
    <div class="grid-cell">
        column 1
    </div>
    <div class="grid-cell">
        column 2
    </div>
    <div class="grid-cell">
        column 3
    </div>
</div>

Example Sass/CSS

.grid-container {
    max-width: 1200px;
    margin: 0 auto;

    display: flex; /* creates flex layout */
    /*  define the flow direction and allowing items to wrap
        shortcut for:
        flex-direction: row;
        flex-wrap: wrap;
    */
    flex-flow: row wrap;
}
.grid-cell {
    width: 32%; /* setting up 3 columns */

    /* Adding margin just in the middle column */
    &:nth-child(3n+2) {
        margin-right: 2%;
        margin-left: 2%;
    }
}

There's a lot more that can be done with flexbox like changing the direction of the flow and probably the most exciting part is being able to rearrange the order of the elements!

See browser support info at caniuse.com and check out the resources listed there for more information on how to use flexbox.