CSS Flexbox Resources – Tutorials,Tools, Grid & Generators
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
A minimal, responsive, style-agnostic CSS framework.
A lightweight responsive Sass/CSS framework based on flexible box.
A CSS grid framework using Flexbox.
A CSS survival kit. Includes only the essentials to make camp.
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
Simple and responsive flexbox based Sass Framework.
Modern CSS framework based on Flexbox.
Structure is a declarative, Flexbox based grid framework. Structure defines layout using non-standard attributes on elements.
Juiced is a Flexbox CSS Framework.
Frontend Framework for responsive, mobile first Webapps, Based on Flexbox.
Flex Grid Framework
The Flex Semantic Grid focusing on performance for stylus and Sass.
A minimalist CSS framework.
Robust, fast and cross browser responsive layout scaffolding based on Flexbox.
Semantic is a UI component framework based around useful principles from natural language.
A lightweight, flexible css framework that focus on mobile.
MyLayout is a simple and easy objective-c framework for iOS view layout. MyLayout provides some simple functions to build a variety of complex interface. It integrates the functions including: Autolayout and SizeClass of iOS, five layout classes of Android, float and flex-box and bootstrap of HTML/CSS.
A simple and effective flexbox based framework.
Flexbox Grid Systems
Waffle Grid System
An easy to use flexbox grid system.
Gridder is simple grid system based on Flexbox.
A grid system based on the flex display property.
A minimal flexbox grid system named after a cute dog.
Flexbox Grid System for Stylus.
Super GiGi is a CSS3 flex based grid system.
A simple yet flexible sass class naming structure on top of a flexbox based grid.
Modular, responsive flexbox grid system.
A simple, responsive, flexbox grid system.
Gridlex is a very simple css grid system to quickly create modern layouts and submodules.
Stylus Flexbox grid system for Meteor with PostCSS.
Better Flex Grid System
Flexbox provides simpler and more flexible layout options in CSS.
EZPZ Flexbox Grid
A lightweight Sass (.scss) flexbox grid system that’s easy to setup and offers a lot of customisation.
A Grid system based on Flexbox Layout.
Ultralight flexbox based grid system.
My take on a flexbox grid system.
React flexbox layout and grid system, built with stateless components and inline styles.
flexgrid.css is a responsive, declarative grid system powered by flexbox.
Flexbox Grid System
A simple, flexible and customizable mobile-first grid system based on CSS3 flexbox and custom html attributes with fractional width values.
Flexbox Grid Less
A simple flexbox CSS grid system using LESS.
12 Column responsive flexbox CSS grid system.
Grid system using CSS flex properties.
A Flexbox grid system.
Build with Flexbox
An interactive flexbox reference tool for web and React Native.
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.
Online CSS flexbox playground and code generator.
Dive in to and explore the wonders of the CSS3 Flexible Box model.
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.
Flexbox in 5 minutes
Take an interactive tour through all the major features of the new flexbox CSS property.
The interactive cheat sheet for Flexbox.
A game for learning CSS flexbox.
Tower Defense with a twist: all towers must be positioned with CSS Flexbox.
Properties for the flex container
Flex Box Editor
Flexbox layout creates the new CSS box like layout where contents are located within.
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.
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.
CSS Flexbox mixins for LESS that adds back-compatibility for the 2009 syntax.
Understand how to calculate the width of flex items.
CSS Flexbox snippets for Sublime
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.
Test CSS Flexbox Rules Live
Build awesome user interfaces with CSS flexbox. Examples and source code included.
CSS Flexbox snippets for Atom
The Ultimate Flexbox Cheat Sheet
Flexbox Themes & Templates
Responsive Landing Page Template With Flexbox
Django Flexbox Theme
A modern, lightweight & responsive CSS starter kit based on Flexbox, designed for Wharton CAOS apps, and created for Django projects.
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.
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.
Flexbox Based Libraries
An iOS layout library like Flexbox.
Ruby wrapper for the Flexbox grid CSS library.
A Sass library of flexbox mixins and handy tools.
A stand-alone library for the Flexbox implementation by the Angular Material Dev team.
A React Responsive Layout Library based on flexbox.
A flexbox CSS library for layouts inspired by Angular Material.
CSS Flexible Box Layout Module Level
A Complete Guide to Flexbox
Flexible Box Layout Module
CSS flex Property
Solved by Flexbox
Using Flexbox today
What IS Flexbox
A curated list of CSS Flexible Box Layout Module or only Flexbox.
A Visual Guide to CSS3 Flexbox Properties
What The FlexBox
A free 20 video course to learn CSS Flexbox.
Flexbox: The Next Generation of CSS Layout Has Arrived
Advanced Cross-Browser Flexbox
Flexbox Codrops CSS Reference
CSS3 Flexible Box Layout Explained
CSS3 Flexible Box
A Quick Responsive Grid System with Flexbox
Flexbox — Fast Track to Layout Nirvana
Flexbox: Reference Guide
Useful Flexbox Technique: Alignment Shifting Wrapping
Using CSS flexible boxes
Designing CSS Layouts With Flexbox Is As Easy As Pie
Responsive Design of the Future with Flexbox
How To Get Started With CSS Flexbox
Laying Out A Flexible Future For Web Design With Flexbox
Getting Dicey With Flexbox
Don’t use flexbox for overall page layout
How 3 Modern Tools are Using Flexbox Grids
A community-curated list of flexbox issues and cross-browser workarounds for them.