Flexbox

Flexbox is a pretty awesome way to arrange and manipulate items on a web page. Instead of having to do a bunch of complex math to figure out how things will arrange on a page and make sure it looks nice throughout the breakpoints, Flexbox lets you do all that and a lot more with only a few lines of code. Here are some resources I’ve come across for using Flexbox and understanding how it works.


Video Tutorials:

  • Wes Bos created a great series of 20 videos called What The Flexbox that gives an awesome overview of how Flexbox works, what everything means and how to use it. I had read some articles talking about Flexbox but his tutorials really made the whole thing make sense.
  • Another great talk is by Zoe M. Gillenwater from CSS Conf 2015. It’s titled “Enhancing Responsiveness with Flexbox” and she describes about what Flexbox is and how it works as well as going through some helpful info about fallbacks for non supporting browsers.

 

Articles:

  • CSS Tricks: A Complete Guide To Flexbox – This is a great reference to be able to remember and understand how Flexbox works. After watching through the tutorials I came back to here and it was a great way to review and visualize the different parts of how Flexbox works.