Responsive Columns with Only Flexbox

Flexbox is kind of quirky and new right now, but once you start digging in it becomes really fun and you quickly realize how powerful it is. This is one simple use-case for Flexbox, responsive columns (without media queries).

Here’s the HTML we’re using:

<ul class="parent">
    <li>Column One</li>
    <li>Column Two</li>
    <li>Column Three</li>
</ul>

And the CSS looks like this:

.parent {
    display: flex;
    flex-wrap: wrap;
}
.parent li {
    flex: 1 1 320px;
    max-width: 500px;

Here’s how it works:

1. We start by telling the parent to allow its children to flex.
2. We tell the parent to allow its children to wrap.
3. We set the flex value on the children to 1 1 320px. The important thing is the 320px, which is basically a min-width for your columns.
4. We set the max-width to 500px.

Here’s a demo showing how that in action:

See the Pen <a href='http://codepen.io/tjacobdesign/pen/yukHF/'>Easy #RWD Flexbox Columns</a> by Timothy Miller (<a href='http://codepen.io/tjacobdesign'>@tjacobdesign</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>

Notice, no media queries! Just the magic of Flexbox.

For more about Flexbox, I highly suggest Chris Coyier’s complete guide. I’ve also written a bit more about Flexbox over at my House of Unicorns.