Flexbox will challenge you on what you know about layouts in CSS and when starting out learning about Flexbox may not be fun at first. But it something you should take seriously as it paves the way for the modern style of laying out content and its not going away anytime soon.
So I’ve collected a collection of some of the best learning guides, frameworks, resources and tools out there to help you get a better understanding about what Flexbox is.
What The Flexbox is a simple and free 20 video course that aare aimed at understanding the fundamentals of Flexbox – we will take a deep dive into understanding rows, columns, axes, wrapping, alignment, centering and layout.
flexbox in 5 minutes is great for those who wanting to learn Flexbox but really don’t have the time. As you can enjoy a interactive tour of all the major features of the CSS property: flexbox.
A Complete Guide to Flexbox is everything you ever wanted to know about Flexbox, written by Chris Coyier. It’s contains useful example to get you up to speed.
From the Mozilla Developer Network, Using CSS Flexible Boxes, introduces you to the layout mode and provides a handy browser compatibility chart.
This article explained Flexbox with big, colourful, animated gifs
Frameworks & Grids
Point is a flexible CSS Framework for building modern responsive web apps that been built with Flexbox.
A modern CSS framework based on Flexbox
Juiced is flexible CSS front-end framework that has many improvments over existing Grid-based CSS frameworks. It is built on the Flexible Boxes Layout spec and is supported by all modern browsers IE10+.
A simple, responsive, flexbox grid system.
A lightweight responsive Sass/CSS framework based on flexible box.A lightweight responsive Sass/CSS framework based on flexible box.https://github.com/sass-basis/basis
Scriptura is a framework html/js/css light that aims to simplify the layout
Just a flexbox grid system.
Parasail is a minimalistic CSS framework from Parasail Health using SASS and Flexbox.
Resources & Tools
Dive in to and explore the wonders of the CSS3 Flexible Box model.
The CSS Flexible Box Layout Model, or “flexbox”, is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
A tool that allows you to test CSS flexbox rules
Understand how to calculate the width of flex items.
A playground for flexbox
Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — ‘layout’ and ‘self’:
A community-curated list of flexbox issues and cross-browser workarounds for them.
A cheatsheet for flexbox.