CSS Flexbox Resources – Tutorials, Tools, Grid & Generators

Free Poster A2 Mockup Design PSD

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 flexbox css, 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

mini.css

mini.css

Source

OrbitCSS

OrbitCSS

Source

Basis

Basis

Source

Grd

Grd

Source

Tent CSS

Tent CSS

Source

Spectre.css

Spectre.css

Source

Wire

Wire

Source

Bulma

Bulma

Source

Structure

Structure

Source

Juiced

Juiced

Source

Flex Grid Framework

Flex Grid Framework

Source

Milligram

Milligram

Source

cssPlus

cssPlus

Source

Semantic UI

Semantic UI

Source

Mobi.css

Mobi.css

Source

BEMSkel

BEMSkel

Source

ThimbleCSS

ThimbleCSS

Source

MyLayout

MyLayout

Source

Flexbox Framework

Flexbox Framework

Source

Flexbox Grid Systems

RolleiFLEX

RolleiFLEX

Source

Waffle Grid System

Waffle Grid System

Source

Gridder

Gridder

Source

Flexbox Grid

Flexbox Grid

Source

sGrid

sGrid

Source

Super GiGi

Super GiGi

Source

Reflex grid

Reflex grid

Source

flex_e_ble

flex_e_ble

Source

Batch

Batch

Source

Gridlex

Gridlex

Source

sGrid For Meteor.js

sGrid For Meteor.js

Source

Better Flex Grid System

Better Flex Grid System

Source

EZPZ Flexbox Grid

EZPZ Flexbox Grid

Source

Flexo

Flexo

Source

Feather Flex

Feather Flex

Source

flexgrid.css

flexgrid.css

Source

Flexbox Tools

Flexbox-Guide

Flexbox-Guide

Source

Build with Flexbox

Build with Flexbox

Source

Flex Layout Attribute (FLA)

Flex Layout Attribute (FLA)

Source

Flexy Boxes

Flexy Boxes

Source

Flexplorer

Flexplorer

Source

Fibonacci

Fibonacci

Source

Flexbox Froggy

Flexbox Froggy

Source

Flexbox Defense

Flexbox Defense

Source

Properties for the flex container

Properties for the flex container

Source

CSS Flexbox Please

CSS Flexbox Please

Source

Flexbox Playground

Flexbox Playground

Source

Flexbox.less

Flexbox.less

Source

CSS Flexbox

CSS Flexbox

Source

Flexbox Tester

Flexbox Tester

Source

CSS Flexbox snippets for Sublime

CSS Flexbox snippets for Sublime

Source

Flexibility

Flexibility

Source

Test CSS Flexbox Rules Live

Test CSS Flexbox Rules Live

Source

Flexbox Patterns

Flexbox Patterns

Source

CSS Flexbox snippets for Atom

CSS Flexbox snippets for Atom

Source

Flexbox Cheatsheets

Flexbox Cheatsheet

Flexbox Cheatsheet

Source

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

Source

Bootstrap 4 admin starter theme

Bootstrap 4 admin starter theme

Source

Flexbox Based Libraries

Hagrid

Hagrid

Source

FlexCss

FlexCss

Source

Flexbox References

CSS Flexible Box Layout Module Level

CSS Flexible Box Layout Module Level

Source

Learn Box Alignment

Learn Box Alignment

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

Source

A Visual Guide to CSS3 Flexbox Properties

A Visual Guide to CSS3 Flexbox Properties

Source

What The FlexBox

What The 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 Codrops CSS Reference

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

Flex Container Properties

 Flex Container Properties

Source

Useful Flexbox Technique: Alignment Shifting Wrapping

Useful Flexbox Technique: Alignment Shifting Wrapping

Source

Basic Concepts of Flexbox

Basic Concepts of Flexbox

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

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