Flexbox, hello

This past week I delved deeply into the world of flexbox for the very first time for a client project. Finally letting go of floats for layout is the biggest change to the way I’m writing CSS since I started this whole thing.

Flexbox turned out to be perfect for this project because being able to put a specific order on blocks of content is very important, especially when the screen is resized. With flexbox and using order, it makes that a breeze. I dove into the project once a lot of the little bits were figured out, but there was a slight problem with the design and getting things to flow properly. I took that back to the client, they agreed to a design tweak, and we were back on the road to using flexbox. It is so fun to be learning and using something new, but also the interaction on twitter about it all was a blast as well.

There have been a lot of various articles and tutorials written about flexbox, and I got asked many times what I was using. Well, here are the links I found most helpful as I was working through laying out this project.

• Chris Coyier, as usual, comes to the rescue with a fantastic post that sums everything up really well. I used this post the most as I loved the clear summary of all the various possibilities for layout.
• I also really enjoyed Solved by Flexbox that lays out a lot of the possibilities and shows some common patterns using flexbox too (yay for the media object!).
• The sass-flex-mixin repo came to my rescue for some good mixins to use to make sure all the various prefixes and syntax were being covered.
• The series that Dudley Storey is doing is really great; here’s the first post. But I also love that he is showing some cool affects you can get, such as a masonry effect with only CSS. Ultimately that didn’t solve my issues, but wow, is it ever a cool way to lay out the right design.
• I watched the series by Sean Floritto because sometimes, seeing it in action is really helpful. They are quick videos and really well done, so I recommend them.
• And lastly, if you need to support older browsers (as I do), this post by Sean is also helpful, guiding you through float fallbacks. I did that for IE9 and below and it is working perfectly.

There are way more articles out there and I am so thankful that so many in this community share their knowledge. The above got me up-to-speed quickly on how to do a more complex layout. I’m still wrestling with some of the responsive changes that need to be made, but overall, flexbox is great and I am so excited to be using it on something other than my personal site.