A curated list of CSS Flexible Box Layout Module or only Flexbox. Inspired by awesome-webcomponents and awesome-svg.

Table of Contents

• W3C Specification
• Newsletter
• Books
• Guides
• Cross Browser
• Articles
• Support
• Preprocessors in Action
• Polyfills
• Other Interesting Articles
• Presentations
• Videos
• Slides and Notes
• Tools
• Libraries and Frameworks
• Featured Projects
• Who to Follow
• Contributing
• Licence

W3C Specification

The specification describes a CSS box model optimized for user interface design.

• CSS Flexible Box Layout Module Level 1

Newsletter

• CSS Layout News
• CSS Weekly

Books

• CSS3 Layout Modules 2nd Edition - Rachel Andrew

Guides

Guides for developers or designer start their studies this wonderful technology.

• A guide to flexbox🤘
• A visual guide to CSS3 flexbox properties
• flexbox (pt-br)
• Dive into flexbox
• Learn layout - flexbox (pt-br)
• Learn layout - flexbox
• Reference of flexbox
• Responsive design of the future with flexbox
• Usando caixas flexiveis CSS (pt-br)
• Using CSS flexible boxes
• What IS Flexbox?

Cross Browser

Tips and tricks for your projects work anywhere :D

Articles

• Advanced cross-browser flexbox
• Are we ready to use flexbox?
• Normalizando bugs no flexbox em diversos navegadores (pt-br)
• Normalizing cross-browser Flexbox bugs
• Using flexbox: mixing old and new for the best browser support
• Using Modernizr with Flexbox

Support

• Caniuse

Preprocessors in action

• Sass flex mixin
• Stylus flex mixin

Polyfills

• Flexie🤘
• Reflexie🤘

Other Interesting Articles

A list of issues related to flexbox.

• Designing CSS layouts with flexbox is as easy as pie
• Flexbox For Interfaces All The Way: Tracks Case Study
• Old flexbox and new flexbox
• Using flexbox today

Presentations

Tired of reading? See an interactive presentation and learn flexbox now.

Videos

• CSS Layout o ontem, o hoje e o depois (pt-br)
• CSS FlexBox Essentials
• CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)
• Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap
• Enhancing Responsiveness With Flexbox
• Flexbox - CSS Day
• Guía Completa de Flexbox desde 0 (ESP)
• Leveling up with flexbox
• What the flexbox? - A simple 20 video course that will help you master CSS Flexbox

Slides and Notes

• Building responsive layouts presentation
• CSS Flexbox: Estruturando layouts sem gambiarras (pr-br)
• CSS3 layout
• Flexbox
• Flexbox and Grid Layout
• Future css layout fowd
• Leveling up with flexbox
• RWD flexbox

Tools

Have a little help to create their projects :D

• CSS flexbox please
• Fibonacci
• Flexbox in 5 minutes
• Flexbox playground
• Flexplorer
• Flexyboxes

Libraries and Frameworks

A list of incredible libraries based on flexbox.

• Bem grid
• Flexboxgrid🤘
• Flex Grid Framework🤘
• Flexbox Grid for Stylus

Featured Projects

Awesome projects about flexbox.

• Cool examples of flexbox layout - A codepen a collection.
• flex-box - A Custom Element to make the basics of flexbox easier to use.
• Flexbugs - A community-curated list of flexbox issues and cross-browser workarounds for them.
• Flexbox tester - Understand how to calculate the width of flex items.
• Post Apocalypse Flexbox
• React-flexbox - Implementation of css flexbox in react with inline styles.
• Solved by flexbox - A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.:metal:
• Visualizing Flexbox - A neat little CodePen Demo to play around with Flex properties.
• ZEEF CSS Flexbox - The awesome flexbox on zeef.:metal:

Who to Follow

People who talk about it.

• Afonso Pacifer @afonsopacifer
• Brad Frost @brad_frost
• Lea Verou @LeaVerou
• Mickley Gillenwater @zomigi
• Philip Walton @philwalton
• Rachel Andrew @rachelandrew
• Richard Herrera @doctyper

Contributing

Want to contribute? Follow these recommendations.

Licence

MIT Licence © Afonso Pacifer