GitHub sortable curated list of CSS Flexible Box Layout Module or only Flexbox. - afonsopacifer/awesome-flexbox

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.

• CSS Flexible Box Layout Module Level 1

• CSS Layout News
• CSS Weekly
• Responsive Design Weekly
• Web Design Weekly

• CSS3 Layout Modules 2nd Edition - Rachel Andrew

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
• 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

• 6 Reasons to Start Using Flexbox
• Advanced cross-browser flexbox
• Are we ready to use flexbox?
• CSS Flexbox Is Entirely Logical (Almost)
• Designing A Product Page Layout with 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

• Caniuse

• 111950237
  Sass flex mixin
• 1122
  Stylus flex mixin
• Compass Flexbox

• 4332126485
  Flexibility🤘
• 110056110
  Flexie
• 2503716
  Reflexie

A list of issues related to flexbox.

• Almost complete guide to flexbox (without 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
• Laying Out A Flexible Future For Web Design With Flexbox
• Flexbox Cheatsheet

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

• 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)
• HTML5. Desenvolvimento avançado
• Introduction to Flexbox
• Leveling up with flexbox
• What the flexbox? - A simple 20 video course that will help you master
• Flexbox Fundamentals

• Access 20+ Page Guide on Flexbox

• Flex-Container Pt. 1: Position Items within a flexbox container
• Flex-Container Pt. 2: Rows and Columns
• Grow and Shrink Flex Items
• Implementing the Sticky Footer and Holy Grail layout

• 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
• CSS Layout: from Table to Flexbox

Have a little help to create their projects :D

• 1333
  CSS Flexbox snippets for Sublime Text 2/3
• 542
  CSS Flexbox snippets for Atom
• Build with Flexbox
• CSS flexbox please
• 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.

• 93652351164
  Flexboxgrid🤘
• 3246
  Ginger Grid - A Flexbox grid framework named after a cute dog.
• 910
  Fuux - Fuux is a Flexbox library that uses the same flexbox interface like classes.
• ---
  Bem grid
• Flex Grid Framework🤘
• Flexbox Grid for Stylus
• 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.

• 181534471794
  Flexbox layout - FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.
• 13642511502
  Flexbugs - A community-curated list of flexbox issues and cross-browser workarounds for them.
• 130173941009
  Solved by flexbox - A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.:metal:
• 15182996
  grid-styled - Flexbox based responsive ReactJS grid system built with styled-components
• 13582771
  Reflexbox - Responsive React flexbox grid system higher order component.
• 162912
  React-flexbox - Implementation of css flexbox in react with inline styles.
• 2861
  Post Apocalypse Flexbox
• 223
  flex-box - A Custom Element to make the basics of flexbox easier to use.
• Cool examples of flexbox layout - A codepen a collection.
• 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.
• FlexLayout for iOS - FlexLayout brings flexbox to iOS using Swift. Concise, intuitive & chainable syntax.
• iron-flex-layout - Style mixins for cross-platform flex-box layouts
• 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.

• CSS Flexbox Layout - treehouse
• Learn Flexbox for free - scrimba

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
• Sara Soueidan @SaraSoueidan
• Sean Fioritto @sfioritto

Want to contribute? Follow these recommendations.

MIT License © Afonso Pacifer