Our Favorite Resources For Learning Flexbox

Kayla Branch 2/14/2017

Topics:

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

Flexbox in 5 Minutes

 

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.

Bootstrap Flexbox Codepen

 

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.

Flexbox Froggy

What can you say? All of the greatest video games feature frogs. Flexbox Froggy is cute, fun way to practice Flexbox.

Flexbox Defense

A familiar game of tower defense, but unlike other tower defense games, you must position your towers using CSS!

Flexbox Defense Game

 

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