CSS Flexbox is the new part of css3 it allows you to create super complex and super flexible layout with CSS. When you work with responsive web design, you will find yourself with a combination of floats, heights swell as any number of hacks to get things done.

CSS Flexbox aims to get rid of these hacks and let us create flexible layouts. CSS Flexbox controls the position, size and spacing of elements about their parent elements and each other. By using flex box, we can quickly build complex layouts like navigations bars and menus, grid layouts, bar charts and more.

Even though the browsers do not entirely support flex box, people are started using flex box. It is excellent idea to keep fallback options like moderniser.

In this post, you can see a great resource of flexbox tools, cheat sheets, reference, frameworks and much more.

Flexbox Based Frameworks

Wire

Wire

Simple and responsive flexbox based Sass Framework.

Source

Bulma

Bulma

Modern CSS framework based on Flexbox.

Source

Structure

Structure

Structure is a declarative, Flexbox based grid framework. Structure defines layout using non-standard attributes on elements.

Source

Juiced

Juiced

Juiced is a Flexbox CSS Framework.

Source

BobScss

BobScss

Frontend Framework for responsive, mobile first Webapps, Based on Flexbox.

Source

Flex Grid Framework

Flex Grid Framework

The Flex Semantic Grid focusing on performance for stylus and Sass.

Source

Milligram

Milligram

A minimalist CSS framework.

Source

cssPlus

cssPlus

Robust, fast and cross browser responsive layout scaffolding based on Flexbox.

Source

Flexbox Grid Systems

Gridder

Gridder

Gridder is simple grid system based on Flexbox.

Source

Flexbox Grid

Flexbox Grid

A grid system based on the flex display property.

Source

sGrid

sGrid

Flexbox Grid System for Stylus.

Source

Super GiGi

Super GiGi

Super GiGi is a CSS3 flex based grid system.

Source

Gridtacular

Gridtacular

Modular, responsive flexbox grid system.

Source

Batch

Batch

A simple, responsive, flexbox grid system.

Source

Gridlex

Gridlex

Gridlex is a very simple css grid system to quickly create modern layouts and submodules.

Source

sGrid

sGrid

Stylus Flexbox grid system for Meteor with PostCSS.

Source

Better Flex Grid System

Better Flex Grid System

Flexbox provides simpler and more flexible layout options in CSS.

Source

EZPZ Flexbox Grid

EZPZ Flexbox Grid

A lightweight Sass (.scss) flexbox grid system that’s easy to setup and offers a lot of customisation.

Source

Flexo

Flexo

A Grid system based on Flexbox Layout.

Source

Feather Flex

Feather Flex

Ultralight flexbox based grid system.

Source

Flexbox Grid

Flexbox Grid

My take on a flexbox grid system.

Source

Reflexbox

Reflexbox

React flexbox layout and grid system, built with stateless components and inline styles.

Source

flexgrid.css

flexgrid.css

flexgrid.css is a responsive, declarative grid system powered by flexbox.

Source

Flexbox Grid System

Flexbox Grid System

A simple, flexible and customizable mobile-first grid system based on CSS3 flexbox and custom html attributes with fractional width values.

Source

Flexbox Grid Less

Flexbox Grid Less

A simple flexbox CSS grid system using LESS.

Source

Gridy

Gridy

12 Column responsive flexbox CSS grid system.

Source

Flexbox Grid

Flexbox Grid

Grid system using CSS flex properties.

Source

Flex

Flex

A Flexbox grid system.

Source

Flexbox Tools

Flex Layout Attribute (FLA)

Flex Layout Attribute (FLA)

Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — layout and self.

Source

Flexy Boxes

Flexy Boxes

Online CSS flexbox playground and code generator.

Source

Flexplorer

Flexplorer

Dive in to and explore the wonders of the CSS3 Flexible Box model.

Source

Fibonacci

Fibonacci

Fibonacci is an offshoot of an internal tool created to let non-developers design page layouts using Flexbox, without having to learn HTML or CSS.

Source

Flexbox in 5 minutes

Flexbox in 5 minutes

Take an interactive tour through all the major features of the new flexbox CSS property.

Source

Flexbox App

Flexbox App

The interactive cheat sheet for Flexbox.

Source

Flexbox Froggy

Flexbox Froggy

A game for learning CSS flexbox.

Source

Flexbox Defense

Flexbox Defense

Tower Defense with a twist: all towers must be positioned with CSS Flexbox.

Source

Properties for the flex container

Properties for the flex container

Source

Flex Box Editor

Flex Box Editor

Source

CSS3 FlexBox

CSS3 FlexBox

Flexbox layout creates the new CSS box like layout where contents are located within.

Source

CSS Flexbox Please

CSS Flexbox Please

The flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container’s margins collapse with the margins of its contents.

Source

Flexbox Playground

Flexbox Playground

The children flex properties can be applied at child level, separate for each child. See the results below and change some of their properties. Hover with the mouse pointer or touch the fields to see the property name.

Source

Flexbox.less

Flexbox.less

CSS Flexbox mixins for LESS that adds back-compatibility for the 2009 syntax.

Source

CSS Flexbox

CSS Flexbox

Source

Flexbox Tester

Flexbox Tester

Understand how to calculate the width of flex items.

Source

CSS Flexbox snippets for Sublime

CSS Flexbox snippets for Sublime

Source

Flexibility

Flexibility

Flexibility is a polyfill for the Flexible Box Layout, commonly known as Flexbox. With Flexibility, you get to design beautiful, flexible layouts on the web without sacrificing the experience in older Internet Explorer browsers.

Source

Test CSS Flexbox Rules Live

Test CSS Flexbox Rules Live

Source

Flexie

Flexie

Source

Flexbox Patterns

Flexbox Patterns

Build awesome user interfaces with CSS flexbox. Examples and source code included.

Source

CSS Flexbox snippets for Atom

CSS Flexbox snippets for Atom

Source

Flexbox Cheatsheets

The Ultimate Flexbox Cheat Sheet

The Ultimate Flexbox Cheat Sheet

Source

Flexbox Cheatsheet

Flexbox Cheatsheet

Source

Flexbox Cheatsheet

Flexbox Cheatsheet

Source

Flexbox Themes & Templates

Responsive Landing Page Template With Flexbox

Responsive Landing Page Template With Flexbox

Source

Django Flexbox Theme

Django Flexbox Theme

A modern, lightweight & responsive CSS starter kit based on Flexbox, designed for Wharton CAOS apps, and created for Django projects.

Source

New in Bootstrap 4 Theme

New in Bootstrap 4 Theme

This is a starter one-page theme that uses the Bootstrap 4 alpha version. This theme will give you preview of new features such as cards, larger fonts, flexbox, the grid system (now with 5 tiers), and extra utilities.

Source

Bootstrap 4 admin starter theme

Bootstrap 4 admin starter theme

The 4th generation of this popular responsive framework will include some interesting new features such as 5 grid tiers (now including xl), cards, `em` sizing, flexbox, CSS normalization and larger font sizes. This is a starter “admin” theme that uses the Bootstrap 4 alpha version.

Source

Flexbox Based Libraries

CCFlexbox

CCFlexbox

An iOS layout library like Flexbox.

Source

Abstrakt

Abstrakt

A flexbox based css framework library.

Source

FlexCss

FlexCss

A lightweight Flexbox based mobile-first CSS/Javascript pattern-library.

Source

FlexboxRb

FlexboxRb

Ruby wrapper for the Flexbox grid CSS library.

Source

flexbox-library

flexbox-library

A Sass library of flexbox mixins and handy tools.

Source

md-flexbox

md-flexbox

A stand-alone library for the Flexbox implementation by the Angular Material Dev team.

Source

REACT PLAN

REACT PLAN

A React Responsive Layout Library based on flexbox.

Source

flex-css-lib

flex-css-lib

A flexbox CSS library for layouts inspired by Angular Material.

Source

Flexbox References

CSS Flexible Box Layout Module Level

CSS Flexible Box Layout Module Level

Source

A Complete Guide to Flexbox

A Complete Guide to Flexbox

Source

Flexible Box Layout Module

Flexible Box Layout Module

Source

flexbox

flexbox

Source

CSS flex Property

CSS flex Property

Source

Solved by Flexbox

Solved by Flexbox

Source

Flexbox adventures

Flexbox adventures

Source

flex

flex

Source

Using Flexbox today

Using Flexbox today

Source

What IS Flexbox

What IS Flexbox

Source

Awesome Flexbox

Awesome Flexbox

A curated list of CSS Flexible Box Layout Module or only Flexbox.

Source

A Visual Guide to CSS3 Flexbox Properties

A Visual Guide to CSS3 Flexbox Properties

Source

What The FlexBox

What The FlexBox

A free 20 video course to learn CSS Flexbox.

Source

Flexbox: The Next Generation of CSS Layout Has Arrived

Flexbox: The Next Generation of CSS Layout Has Arrived

Source

Advanced Cross-Browser Flexbox

Advanced Cross-Browser Flexbox

Source

Flexbox Codrops CSS Reference

Flexbox

Source

CSS3 Flexible Box Layout Explained

CSS3 Flexible Box Layout Explained

Source

CSS3 Flexible Box

CSS3 Flexible Box

Source

A Quick Responsive Grid System with Flexbox

A Quick Responsive Grid System with Flexbox

Source

Flexbox — Fast Track to Layout Nirvana

Flexbox — Fast Track to Layout Nirvana

Source

Flexbox: Reference Guide

Flexbox: Reference Guide

Source

Useful Flexbox Technique: Alignment Shifting Wrapping

Useful Flexbox Technique: Alignment Shifting Wrapping

Source

Using CSS flexible boxes

Using CSS flexible boxes

Source

Designing CSS Layouts With Flexbox Is As Easy As Pie

Designing CSS Layouts With Flexbox Is As Easy As Pie

Source

Responsive Design of the Future with Flexbox

Responsive Design of the Future with Flexbox

Source

How To Get Started With CSS Flexbox

How To Get Started With CSS Flexbox

Source

Laying Out A Flexible Future For Web Design With Flexbox

Laying Out A Flexible Future For Web Design With Flexbox

Source

Getting Dicey With Flexbox

Getting Dicey With Flexbox

Source

Don’t use flexbox for overall page layout

Don't use flexbox for overall page layout

Source

How 3 Modern Tools are Using Flexbox Grids

How 3 Modern Tools are Using Flexbox Grids

Source

Flexbugs

Flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.

Source

Building With Flexbox

Building With Flexbox

Source

CSS3 Flexbox Reference

CSS3 Flexbox Reference

Source

Flexbox Grid Finesse

Flexbox Grid Finesse

Source

Playing With Flexbox and Quantity Queries

Playing With Flexbox and Quantity Queries

Source

Flexbox’s Best-Kept Secret

Flexbox’s Best-Kept Secret

Source

Star Rating Re-imagined with Flexbox

Star Rating Re-imagined with Flexbox

Source

CSS Layout with Flexbox

CSS Layout with Flexbox

Source

Flexbox

Flexbox

Source

Dive into Flexbox

Dive into Flexbox

Source

Flexbox in the Real World

Flexbox in the Real World

Source