Flexbox is an advanced method of more efficiently using space amongst items of a CSS container. While its theory can seem a bit complicated and difficult to master, thankfully the web is chock-full of great opportunities to learn.
Flexbox Learning Guides
Flexbox CSS Reference By Sara Soueidan
Flexbox CSS Reference is a collection of writings that will help you learn the basics. There’s a rundown of all the various Flexbox properties and some excellent interactive demonstrations of their capabilities.
Dive into Flexbox – Design, Tools & Workflow By Greg Smith
Dive into Flexbox provides some background information on Flexbox including why it holds such promise, a brief history, along with various examples of Flexbox concepts and properties.
Using CSS Flexible Boxes By MDN
Straight from the Mozilla Developer Network, Using CSS Flexible Boxes will introduce you to the layout mode and provides a handy browser compatibility chart.
A Complete Guide to Flexbox By Chris Coyier
A Complete Guide to Flexbox is perhaps everything you ever wanted to know about Flexbox, but were afraid to ask. Lots of useful examples here to get you up-to-speed.
How To Get Started With CSS Flexbox By Paul Underwood
What The FlexBox?! uses an in-depth series of 20 free videos to unlock the mysteries of layouts for more visual learners. Sometimes, it’s just nice to have someone show and guide you with what can be a complicated topic.
flexbox in 5 Minutes (Interactive Tour)
If you’re sick of having to read long tutorials, flexbox in 5 Minutes might be for you. It’s a simple tour of what Flexbox is and does in just 5 minutes (comprised of 53 slides).
Flexbox Examples & Resources
Flexbox Patterns By CJ Cenizal
Flexbox Patterns will demonstrate several real-world examples along with the code to get you started.
Solved by Flexbox By Philip Walton
Featuring some long-sought-after layout scenarios, Solved by Flexbox will show you techniques behind some of the layouts that can now be easily achieved.
Flexy Boxes will help you generate layouts and tweak the properties of both the flex container and items.
Flexbox Playground By Gabi Siquès
Flexbox Playground is a colorful way to learn about the power of Flexbox layout properties.
Flexbox Editor By Brian Diehr
Drag and drop boxes and fiddle with their properties using Flexbox Editor.
Web Frameworks Based on Flexbox
Flexbox Grid – Grid System Based on flexbox
Flexbox Grid is an easy-to-use framework with lots of examples for creating various types of layouts.
cssPlus – Layout Scaffolding Based on Flexbox
cssPlus helps you create flexible and responsive layouts all based on Flexbox.
STRUCTURE – Declarative Flexbox Based Grid Framework
STRUCTURE is a declarative framework – meaning it uses non-standard attributes on elements. This can cut down on development time as opposed to adding several CSS classes to each item.
Juiced – Flexbox CSS Framework
Flexbox Froggy By Thomas Park
Like to learn by doing and having some fun while you’re at it? Flexbox Froggy is a game that requires you to write Flexbox code!
When used correctly, Flexbox can make setting up even the most complex layouts a much easier task. Just think about the possibilities of creating layouts that automatically adjust to their content and screen viewports. And it’s all built in to CSS3!
Start using these resources today and flex your layout muscles.
Leave a Reply