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.

Share

Understanding Flexbox: Learning Guides, Frameworks, Resources & Tools