Developers: how familiar are you with Flexbox?
Flexbox, or as it’s officially known, the CSS Flexible Box Layout Module, is one of the more useful CSS modules to understand for modern, mobile friendly web design. As CSS Tricks explains, Flexbox is an efficient way to lay out, align and distribute space among items in a container, even when their size is unknown or dynamic.
Using Flexbox can make more complex, responsive layouts possible with less code. With Flexbox, elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
As we’ve preached the benefits of Flexbox to our clients, we’ve gotten questions from some of their developers about the best resources for getting started with or mastering the Flexbox layout mode. I pitched in my own favorite resources for Flexbox and then questioned the rest of our front-end development and design teams about theirs.
Here are our suggested resources:
Stephanie, Front-End Developer
Flexbox in 5 Minutes
Flexbox in 5 provides an interactive tour through all the major features of the new flexbox CSS property.
Take a step-by-step tour through the main properties of flexbox, including a few demos Experiment with changing properties of the flex container and individual flex items Best of all, you can oopy and paste live code samples from whatever you create
CSS-Tricks’s A Complete Guide to Flexbox | CSS-Tricks
Referenced above, this is a great CSS Tricks guide—both incredible extensive and incredibly visual.
Kayla, Front-End Developer
If you’re not familiar with CodePen, you should be! CodePen provides a great database of examples to leverage for your projects or just to experiment with for the purposes of learning Flexbox.
Feel free to check out my CodePen for a Bootstrap example here.
You can find many other relevant Flexbox CodePens just by searching the site. Here's another useful example.
Joe, Design Director
Can I Use
"Can I use" provides up-to-date browser support tables to see how different front-end web technologies are supported on a variety of common desktop and mobile web browsers. A useful tool as you start to explore implementing Flexbox.
Jess, Front-End Developer
Even more about how Flexbox works, explained in big, colorful, animated gifs!
A highly visual quick read explaining some Flexbox properties using the medium of choice for just about everything on the internet today. Even better: this article is hot off the press and explains some more advanced features visually. If you need a more basic gif introduction, a previous post is linked to at the beginning of this one.
Adrian, Front-End Developer
What better way to learn Flexbox than gamification? Adrian suggested two Flexbox learning games.
What can you say? All of the greatest video games feature frogs. Flexbox Froggy is cute, fun way to practice Flexbox.
A familiar game of tower defense, but unlike other tower defense games, you must position your towers using CSS!
Have your own favorite resource that you think you should be listed here? Feel free to reach out using our comment box with a suggestion and we’ll add it. Just include Flexbox in your comments.
Looking for more front-end and design resources? View our recorded webcast on user and customer experience, The New World of User Experience, now!
View the webcast now