The ultimate Flexbox cheat sheet

[Rss Bot 1]

If you're a web designer then we really shouldn't need to be telling you about Flexbox by now. Even non-web people have got the idea that it's a powerful responsive web design tool for creating pages that arrange page layouts in a predictable way to look good in any viewport.

Knowing it's good, however, isn't the same as being able to actually use it, and while there's not actually great deal to the Flexbox specification, figuring out how it all fits together can feel like a bit of an uphill struggle. 

Our web designer's guide to Flexbox is the perfect way to get to grips with it, but if you're having trouble getting all the various elements to stick in your head, we've found lovely Flexbox cheat sheet that you'll want to keep bookmarked.

So if you're having trouble telling your flex-grow from your stretch, head over to FLEX. It's the work of Chris Malven at Malven Co., an interactive design and development studio based in Iowa, and it contains all the most important Flexbox properties you're going to need, presented in a simple visual manner that doesn't bog you down in wordy explanations.

FLEX puts all those Flexbox properties you need at your fingertips

Instead, it shows what each property does via a wonderfully minimal image; simply find the property you want to use and click on it, and FLEX will copy the code you need straight to your clipboard. Easy!

Malven explains that while many Flexbox resources are brilliant for learning the details of how things work, there's too much going on for them to serve as quick references. "I wanted something that was as visually condensed as possible," he says, "and easy to scan visually. I need to see what elements styled using each properly will look like."

And so he built FLEX as a visual Flexbox cheat sheet; he says he uses it all the time and that it's helped him to become truly comfortable with the Flexbox syntax.

You can find FLEX here; if you find it useful and wish there was a similar resource for CSS Grid Layout, then guess what? You're in luck; Malven has built that very thing in the form of GRID, which lays out all the CSS Grid properties in a similarly digestible format.

Related articles:

• 19 cool CSS animation examples to recreate
• The best web hosting services in 2019
• 10 CodePen tricks you never knew you needed

View the full article