A curated list of CSS Flexible Box Layout Module or only Flexbox. Inspired by awesome-webcomponents and awesome-svg.
- 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
- Courses
- Who to Follow
- Contributing
- Licence
The specification describes a CSS box model optimized for user interface design.
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
- Um guia visual para Flexbox (pt-br)
- Usando caixas flexiveis CSS (pt-br)
- Using CSS flexible boxes
- What IS Flexbox?
Tips and tricks for your projects work anywhere :D
- 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
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
- Flexbox’s Best-Kept Secret
- Grid, Flexbox, Box Alignment: Our New System for Layout
- Old flexbox and new flexbox
- Using flexbox today
Tired of reading? See an interactive presentation and learn flexbox now.
- 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
- 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
Have a little help to create their projects :D
- CSS flexbox please
- CSS Flexbox snippets for Atom
- CSS Flexbox snippets for Sublime Text 2/3
- Fibonacci
- Flexbox in 5 minutes
- Flexbox playground
- Flexplorer
- Flexyboxes
- Test CSS Flexbox Rules Live
A list of incredible libraries based on flexbox.
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 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:
- CSS Flexbox Layout - treehouse
People who talk about it.
- Afonso Pacifer @afonsopacifer
- Brad Frost @brad_frost
- Chris Coyier @chriscoyier
- Lea Verou @LeaVerou
- Mickley Gillenwater @zomigi
- Nicolas @necolas
- Philip Walton @philwalton
- Rachel Andrew @rachelandrew
- Richard Herrera @doctyper
Want to contribute? Follow these recommendations.