A while ago when the flexbox layout engine was a hope and a dream for the future i created a Pen. It was mainly to try and get a feel for what might one day be the way we build websites.

I made it mainly for my own sake but i think it turned out to be a decent learning tool for people wanting to get a hang of how all this works. Flexbox is a bit tricky to wrap you head around, epecially if you, like most us us, you’re used to laying out pages using floats.

Flexbox a insanely powerfull and getting in on the groundfloor and starting to use it on pits and pieces in your day to day work is a good way get used to working with the syntax. For example i recently used flexbox in a single element to get quick and dirty vertical centering on buttons that had varying lines of text. (i used this technique)

Now the flexbox layout engine is close to being a viable option for production and i thought i might need to take a look at this thing again.

Taking more than a few hints from how Bootstrap does their layout classes, so for users of bootstrap it should be pretty easy to get into.

See the Pen Jurs Flexbox grid system by Rasmus Jürs (@Jurs) on CodePen.