Reflex - a lightweight responsive flexbox grid

It's a common problem in responsive web development that making elements the same height at all viewport sizes is quite fiddly to do, especially when your elements are dynamically generated.

As you clever people know, flexbox solves this problem perfectly by introducing the property of align-items: stretch.

Flexbox also solves a whole host of other layout problems such as vertical centering. I started to research flexbox and learnt that (at the time of writing), full global flexbox support is at 81.74% (excluding browsers with outdated or partial support) so if I begin using flexbox it will solve a lot of these layout problems.

This caught my interest and I ended up building a lightweight responsive flexbox grid with cross browser support, an inline-block fallback for older browsers and no polyfills. The cross browser support is good, giving us a reliable grid that performs well across most browsers that developers typically have to support and I have implemented it on several of the websites I currently work on, including this one. Feel free to browse the documentation or demo pages for more information.

#More info

Edit - Since this post was published I have written a post explaining the underlying css and how it works.