Flexbox lead image

You Flexin’, yo?

Flexbox is the best internet web thing ever. Well, at least in the last few years.

Late to class

I’m kinda late to the flexbox party, but with good reason. I swear flexbox support still wasn’t all that great. Well, I was wrong. Over the next few weeks to a month I’ll be slowly converting my singularity grids over to flexbox. Why? Because it’s fun and I like to play with it. Also, because my website should be a playground if nothing else, right?

There are a bunch of articles about Flexbox being ready. And it’s true, it really is ready, and damn it’s great. If you need to support IE8, you can likely get by with an IE8 stylesheet and modernizr tests. But really, no one should care about IE8. I’d like to not care about IE9 or 10, either.

Why is it so great?

My favorite part is being able to write far less code to create a simple grid. Or being able to vertically center things. How about being able to easily achieve the holy grail of layouts? Or a sticky footer?

Using It

1. Define a flexbox container

ul.flex-container {
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
  align-items: flex-start;
}

2. Set a flex property on flex items

ul.flex-container li {
  flex: 1 auto;
}

Boom.