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.
Learning Guides
What The Flexbox
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
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
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.
Using CSS Flexible Boxes
From the Mozilla Developer Network, Using CSS Flexible Boxes, introduces you to the layout mode and provides a handy browser compatibility chart.
How Flexbox works
This article explained Flexbox with big, colourful, animated gifs
Frameworks & Grids
Point
Point is a flexible CSS Framework for building modern responsive web apps that been built with Flexbox.
Bulma
A modern CSS framework based on Flexbox
Juiced
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+.
Batch
A simple, responsive, flexbox grid system.
Basis
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 Framework
Scriptura is a framework html/js/css light that aims to simplify the layout
Gridlex
Just a flexbox grid system.
Parasail
Parasail is a minimalistic CSS framework from Parasail Health using SASS and Flexbox.
Resources & Tools
Flexplorer
Dive in to and explore the wonders of the CSS3 Flexible Box model.
CSS Flexbox Please!
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.
Test CSS Flexbox Rules
A tool that allows you to test CSS flexbox rules
Flexbox Tester
Understand how to calculate the width of flex items.
Flexbox playground
A playground for flexbox
Flex Layout Attribute
Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — ‘layout’ and ‘self’:
Flexbugs
A community-curated list of flexbox issues and cross-browser workarounds for them.
Flexbox Cheatsheet
A cheatsheet for flexbox.
A great Flexbox framework is mini.css – https://chalarangelo.github.io/mini.css/index.html
I have been using it for a little while now and it is really easy to learn and use, plus it feels responsive and very lightweight. A definitve must-try for anyone picking up flexbox nowadays. Oh, and it is also very customizable so you’ll learn a ton if you try to tweak it to your liking.