W3C Specification |
| CSS Flexible Box Layout Module Level 1 | | | |
Newsletter |
| CSS Layout News | | | |
| CSS Weekly | | | |
| Responsive Design Weekly | | | |
| Web Design Weekly | | | |
Books |
| CSS3 Layout Modules 2nd Edition - Rachel Andrew | | | |
Guides |
| 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 | | | |
Cross Browser |
| 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 | | | |
| Compass Flexbox | | | |
| Sass flex mixin | 1,122 | over 8 years ago | |
| Stylus flex mixin | 11 | over 12 years ago | |
| Flexibility | 4,326 | almost 4 years ago | |
| Flexie | 1,096 | almost 10 years ago | |
| Reflexie | 250 | about 13 years ago | |
Other Interesting Articles |
| 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 | | | |
Presentations |
| 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 | | | |
Presentations / Sketching with CSS Flexbox Guide by @sfioritto |
| 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 | | | |
|
| Build with Flexbox | | | |
| CSS flexbox please | | | |
| CSS Flexbox snippets for Atom | 5 | over 6 years ago | |
| CSS Flexbox snippets for Sublime Text 2/3 | 13 | over 6 years ago | |
| Fibonacci | 442 | over 6 years ago | |
| Flexbox in 5 minutes | | | |
| Flexbox playground | | | |
| Flexbox property manipulator | | | |
| Flexplorer | | | |
| Flexyboxes | | | |
| Test CSS Flexbox Rules Live | | | |
| Try Flexbox | | | |
Libraries and Frameworks |
| Bem grid | 134 | over 9 years ago | |
| Flexboxgrid | 9,382 | almost 6 years ago | |
| Flex Grid Framework | | | |
| Flexbox Grid for Stylus | | | |
| Fuux | 9 | almost 8 years ago | Fuux is a Flexbox library that uses the same flexbox interface like classes |
| Ginger Grid | 32 | over 3 years ago | 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 |
Featured Projects |
| Cool examples of flexbox layout | | | A codepen a collection |
| flex-box | 2 | over 11 years ago | A Custom Element to make the basics of flexbox easier to use |
| Flexbugs | 13,634 | over 2 years ago | 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 | 18,274 | over 2 years ago | FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android |
| FlexLayout for iOS | 2,018 | almost 2 years ago | FlexLayout brings flexbox to iOS using Swift. Concise, intuitive & chainable syntax |
| grid-styled | 2,039 | about 7 years ago | Flexbox based responsive ReactJS grid system built with styled-components |
| iron-flex-layout | | | Style mixins for cross-platform flex-box layouts |
| Post Apocalypse Flexbox | 28 | over 10 years ago | |
| React-flexbox | 162 | almost 9 years ago | Implementation of css flexbox in react with inline styles |
| Reflexbox | 1,351 | over 8 years ago | Responsive React flexbox grid system higher order component |
| Solved by flexbox | 13,008 | almost 4 years ago | A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox |
| Visualizing Flexbox | | | A neat little CodePen Demo to play around with Flex properties |
| ZEEF CSS Flexbox | | | The awesome flexbox on zeef |
| Flexbox Zombies | | | A game for learning CSS flexbox |
Courses |
| CSS Flexbox Layout | | | treehouse |
| Learn Flexbox for free | | | scrimba |
Who to Follow |
| @afonsopacifer | | | Afonso Pacifer |
| @brad_frost | | | Brad Frost |
| @chriscoyier | | | Chris Coyier |
| @LeaVerou | | | Lea Verou |
| @zomigi | | | Mickley Gillenwater |
| @necolas | | | Nicolas |
| @philwalton | | | Philip Walton |
| @rachelandrew | | | Rachel Andrew |
| @doctyper | | | Richard Herrera |
| @SaraSoueidan | | | Sara Soueidan |
| @sfioritto | | | Sean Fioritto |
awesome-flexbox
A curated list of CSS Flexible Box Layout Module or only Flexbox.
sindresorhus/awesome
jnv/lists
0ex/more-awesome
styled-system/styled-system
rebassjs/rebass
nielsenramon/chalk
alexwolfe/buttons
zoerooney/emi
macbre/analyze-css
kimroen/ember-cli-autoprefixer
ianrose/deventy
ng-packagr/ng-packagr
wbkd/riotjs-startkit
taylorbryant/jekyll-starter-tailwind