A curated list of CSS Flexible Box Layout Module or only Flexbox. Inspired by awesome-webcomponents and awesome-svg.
The specification describes a CSS box model optimized for user interface design. * CSS Flexible Box Layout Module Level 1
Guides for developers or designer start their studies this wonderful technology. * A guide to flexbox:metal: * A visual guide to CSS3 flexbox properties * flexbox (pt-br) * Dive into flexbox * How Flexbox works — explained with big, colorful, animated gifs * How Flexbox works — explained with big, colorful, animated gifs (pt-br) * Learn layout - flexbox (pt-br) * Learn layout - flexbox * Reference of flexbox * Responsive design of the future with flexbox * The Flexbox Reading List: Techniques and Tools * Um guia visual para Flexbox (pt-br) * Usando caixas flexiveis CSS (pt-br) * Using CSS flexible boxes * What IS Flexbox? * Desarrollo de aplicaciones web Flexibles (es-es) * Webflow Flexbox
Tips and tricks for your projects work anywhere :D
A list of issues related to flexbox. * Almost complete guide to flexbox (without flexbox):metal: * Designing CSS layouts with flexbox is as easy as pie * Flexbox For Interfaces All The Way: Tracks Case Study * Flexbox’s Best-Kept Secret * Grid, Flexbox, Box Alignment: Our New System for Layout * Old flexbox and new flexbox * Using flexbox today * Laying Out A Flexible Future For Web Design With Flexbox * Flexbox Cheatsheet
Tired of reading? See an interactive presentation and learn flexbox now.
Have a little help to create their projects :D * Build with Flexbox * CSS flexbox please * CSS Flexbox snippets for Atom * CSS Flexbox snippets for Sublime Text 2/3 * Fibonacci * Flexbox in 5 minutes * Flexbox playground * Flexbox property manipulator * Flexplorer * Flexyboxes * Test CSS Flexbox Rules Live * Try Flexbox
A list of incredible libraries based on flexbox. * Bem grid * Flexboxgrid:metal: * Flex Grid Framework:metal: * Flexbox Grid for Stylus * Fuux - Fuux is a Flexbox library that uses the same flexbox interface like classes. * Ginger Grid - A Flexbox grid framework named after a cute dog. * Bulma - A modern CSS framework based on Flexbox * Milligram - A minimalist CSS framework * RolleiFLEX - Just a responsive flexbox grid * Waffle Grid - An easy to use flexbox grid system
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 Froggy - A game for learning CSS flexbox. * Flexbox Patterns - Examples and source code that will teach you how to build UI components with CSS flexbox! What’s flexbox? * Flexbox Defense - Tower Defense with a twist: all towers must be positioned with CSS Flexbox. * Flexbox tester - Understand how to calculate the width of flex items. * Flexbox layout - FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android. * FlexLayout for iOS - FlexLayout brings flexbox to iOS using Swift. Concise, intuitive & chainable syntax. * grid-styled - Flexbox based responsive ReactJS grid system built with styled-components * iron-flex-layout - Style mixins for cross-platform flex-box layouts * Post Apocalypse Flexbox * React-flexbox - Implementation of css flexbox in react with inline styles. * Reflexbox - Responsive React flexbox grid system higher order component. * 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: * Flexbox Zombies - A game for learning CSS flexbox.
People who talk about it. * Afonso Pacifer [@afonsopacifer](https://twitter.com/afonsopacifer) * Brad Frost [@brad_frost](https://twitter.com/brad_frost) * Chris Coyier [@chriscoyier](https://twitter.com/chriscoyier) * Lea Verou [@LeaVerou](https://twitter.com/leaverou) * Mickley Gillenwater [@zomigi](https://twitter.com/zomigi) * Nicolas [@necolas](https://twitter.com/necolas) * Philip Walton [@philwalton](https://twitter.com/philwalton) * Rachel Andrew [@rachelandrew](https://twitter.com/rachelandrew) * Richard Herrera [@doctyper](https://twitter.com/doctyper) * Sara Soueidan [@SaraSoueidan](https://twitter.com/SaraSoueidan) * Sean Fioritto [@sfioritto](https://twitter.com/sfioritto)
Want to contribute? Follow these recommendations.