Flexbox. It's a front-end developer's dream for creating web layouts. That being said, I'm going to be to the point; if you aren't using Flexbox for your layouts yet, why are you purposefully making your life harder? I'm kidding, kind of. That mess of floats, clears, various display values, widths, heights, vertical align middle never working, etc, etc, is ancient history. Ok, it's not 100% history, you're always going to have to do a little bit of it here and there, but Flexbox is truly a cross-browser supported game changer that revolutionizes how front-end developers create web layouts. We've used Flexbox at gap intelligence to layout parts of gapintelligence.com and extensively throughout our new cloud-based dashboard that lets users interact with our GFD online.
If you aren't up to speed yet, I'll save my breath and let these fine developers eloquently explain how it works.
A Visual Guide to CSS3 Flexbox Properties
While the resources above will show you the ins-and-outs of using Flexbox, my intention here is to provide a short and sweet, one page cheat sheet to Flexbox's many options. From my experience, after initially learning Flexbox, I still needed a reference for all of it's various properties and values. Flexbox is a dramatic shift from the previous methods of doing web layouts, so it takes some time to master. I'd often reference the same couple sites when needed, but found myself doing a lot of scrolling through the content to find what I was looking for. Hence, the Flexbox One Page Cheat Sheet was born. Easy to skim, printable on a standard letter sized sheet of paper, this cheat sheet hopes to be your friend as you continue to sharpen your Flexbox skills. Enjoy!
