Go to the profile of Joy Liu
Joy Liu
Front-End Developer. Writer. Ravenclaw. Tech, politics, feminism, Asian-ness, among other stuff. @hackeryou cohort 11

Love In The Age Of Flexbox

The world of webpage layout changed on a hot summer day in August, 2012 (no offense Australia). Tears were shed, bottles were popped, thousands of clearfix classes were removed. The W3C has once again, changed lives.

Before this day, all page layouts are done with the buggy “float”. When the W3C first released float in the infancy of the almighty internet, the geniuses at MIT didn’t intend for it to be in charge of page layouts. On almost every css stylesheets in the world, developers have to add this line at the top to not to break the internet:

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: “ “; clear: both; height: 0; }

Float is also limited when it comes to horizontally and vertically center content (tip: don’t sleep on calc). So by the time a page layout is completed, it feels like this:

Then comes flexbox. With a combination of {align-items:center;} and {justify-content: center;}, flexbox forever solves the problem of vertically and horizontally centering content.

It is really difficult to commit to {float: left;} when flexbox is literally right at the bottom of your finger tip. But every superhero has its weakness. Once again, IE plays the villain.

Browser support for {float:}
Browser support for {display: flex;}

At the same time, flexbox is not necessarily good for keeping its children in pace. When the parent is assigned {display:flex;}, it will stretch out its content. As a result, the image inside of a flex container will not maintain its original ratio unless we assign it with a fixed height/width.

It is also not recommended to use flexbox for overall page layout. When it comes to responsive design, percentage layout and media queries are much safer options.

And if you cannot convince all your users to give up on IE, do not use flexbox.

Tears were shed, again. It’s like having a plate of salad for health purposes, but a cheeseburger is what you really, really want.

So when do we use flexbox?

EQUAL HEIGHT!

When the parent element is assigned {display: flex;}, its children automatically share the same height.

VERTICALLY ALIGNMENT!

The <code>align-items</code> can perfect center content, no math involved:

So that’s a <code>flex-wrap: wrap</code>! If you want to read more about when/how to use flexbox, here are a few really good resources: