Track Awesome Flexbox Updates Daily

:eyeglasses: A curated list of CSS Flexible Box Layout Module or only Flexbox.

🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 afonsopacifer/awesome-flexbox · ⭐ 1.1K · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Sep 27, 2019

Courses / Slides and Notes

• Learn Flexbox for free - scrimba

Oct 24, 2017

Featured Projects / Slides and Notes

• grid-styled (⭐2.1k) - Flexbox based responsive ReactJS grid system built with styled-components

Sep 15, 2017

Featured Projects / Slides and Notes

• FlexLayout for iOS (⭐1.7k) - FlexLayout brings flexbox to iOS using Swift. Concise, intuitive & chainable syntax.

Jul 31, 2017

Libraries and Frameworks / Slides and Notes

• Fuux (⭐9) - Fuux is a Flexbox library that uses the same flexbox interface like classes.

Featured Projects / Slides and Notes

• Flexbox Zombies - A game for learning CSS flexbox.

Jul 20, 2017

Featured Projects / Slides and Notes

• iron-flex-layout - Style mixins for cross-platform flex-box layouts

Apr 03, 2017

Guides

• How Flexbox works — explained with big, colorful, animated gifs

• How Flexbox works — explained with big, colorful, animated gifs (pt-br)

Mar 31, 2017

Libraries and Frameworks / Slides and Notes

• RolleiFLEX - Just a responsive flexbox grid

Feb 27, 2017

Libraries and Frameworks / Slides and Notes

• Waffle Grid - An easy to use flexbox grid system

Feb 23, 2017

Tools / Slides and Notes

• Try Flexbox

Nov 11, 2016

Libraries and Frameworks / Slides and Notes

• Ginger Grid (⭐31) - A Flexbox grid framework named after a cute dog.

Sep 28, 2016

Featured Projects / Slides and Notes

• Reflexbox (⭐1.4k) - Responsive React flexbox grid system higher order component.

Jul 03, 2016

Other Interesting Articles / Polyfills

• Flexbox Cheatsheet

Jun 19, 2016

Sketching with CSS Flexbox Guide by @sfioritto / Read Materials

• Access 20+ Page Guide on Flexbox

Sketching with CSS Flexbox Guide by @sfioritto / Video Materials

• 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

Who to Follow / Slides and Notes

• Sean Fioritto @sfioritto

May 24, 2016

Tools / Slides and Notes

• Build with Flexbox

May 13, 2016

Sketching with CSS Flexbox Guide by @sfioritto / Slides and Notes

• CSS Layout: from Table to Flexbox

May 12, 2016

Featured Projects / Slides and Notes

• Flexbox layout (⭐18k) - FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.

Apr 14, 2016

Guides

• Webflow Flexbox

Other Interesting Articles / Polyfills

• Laying Out A Flexible Future For Web Design With Flexbox

Presentations / Videos

• What the flexbox? - A simple 20 video course that will help you master

• Flexbox Fundamentals

Apr 13, 2016

Presentations / Videos

• HTML5. Desenvolvimento avançado

Apr 05, 2016

Other Interesting Articles / Polyfills

• Almost complete guide to flexbox (without flexbox)🤘

Mar 22, 2016

Presentations / Videos

• Introduction to Flexbox

Mar 16, 2016

Who to Follow / Slides and Notes

• Sara Soueidan @SaraSoueidan

Mar 14, 2016

Cross Browser / Articles

• CSS Flexbox Is Entirely Logical (Almost)

Mar 10, 2016

Libraries and Frameworks / Slides and Notes

• Milligram - A minimalist CSS framework

Mar 03, 2016

Featured Projects / Slides and Notes

• Flexbox Defense - Tower Defense with a twist: all towers must be positioned with CSS Flexbox.

Mar 02, 2016

Newsletter

• Responsive Design Weekly

• Web Design Weekly

Cross Browser / Articles

• 6 Reasons to Start Using Flexbox

Feb 23, 2016

Guides

• The Flexbox Reading List: Techniques and Tools

Feb 07, 2016

Guides

• Desarrollo de aplicaciones web Flexibles (es-es)

Feb 01, 2016

Libraries and Frameworks / Slides and Notes

• Bulma - A modern CSS framework based on Flexbox

Jan 26, 2016

Tools / Slides and Notes

• Flexbox playground

• Flexbox property manipulator

Jan 25, 2016

Cross Browser / Articles

• Designing A Product Page Layout with Flexbox

Dec 26, 2015

Cross Browser / Preprocessors in action

• Compass Flexbox

Dec 24, 2015

Tools / Slides and Notes

• CSS Flexbox snippets for Atom (⭐4)

• CSS Flexbox snippets for Sublime Text 2/3 (⭐13)

Featured Projects / Slides and Notes

• Flexbox Patterns - Examples and source code that will teach you how to build UI components with CSS flexbox! What’s flexbox?

Dec 23, 2015

Guides

• Um guia visual para Flexbox (pt-br)

Dec 18, 2015

Tools / Slides and Notes

• Flexbox in 5 minutes

Dec 16, 2015

Cross Browser / Polyfills

• Flexibility (⭐4.4k)🤘

• Flexie (⭐1.1k)

• Reflexie (⭐252)

Other Interesting Articles / Polyfills

• Grid, Flexbox, Box Alignment: Our New System for Layout

Tools / Slides and Notes

• Test CSS Flexbox Rules Live

Dec 15, 2015

Who to Follow / Slides and Notes

• Chris Coyier @chriscoyier

• Nicolas @necolas

Dec 04, 2015

Other Interesting Articles / Polyfills

• Flexbox’s Best-Kept Secret

Dec 01, 2015

Featured Projects / Slides and Notes

• Flexbox Froggy - A game for learning CSS flexbox.

Nov 29, 2015

Courses / Slides and Notes

• CSS Flexbox Layout - treehouse

Nov 04, 2015

Other Interesting Articles / Polyfills

• Flexbox For Interfaces All The Way: Tracks Case Study

Oct 31, 2015

Featured Projects / Slides and Notes

• Flexbox tester - Understand how to calculate the width of flex items.

Oct 29, 2015

Presentations / Videos

• Enhancing Responsiveness With Flexbox

Oct 25, 2015

Presentations / Videos

• CSS FlexBox Essentials

• CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)

Libraries and Frameworks / Slides and Notes

• Flexbox Grid for Stylus

Oct 20, 2015

Sketching with CSS Flexbox Guide by @sfioritto / Slides and Notes

• CSS Flexbox: Estruturando layouts sem gambiarras (pr-br)

• Flexbox and Grid Layout

Oct 19, 2015

Featured Projects / Slides and Notes

• Post Apocalypse Flexbox (⭐29)

Oct 12, 2015

Featured Projects / Slides and Notes

• React-flexbox (⭐162) - Implementation of css flexbox in react with inline styles.

Oct 11, 2015

Featured Projects / Slides and Notes

• ZEEF CSS Flexbox - The awesome flexbox on zeef.🤘

Sep 22, 2015

Cross Browser / Articles

• Using Modernizr with Flexbox

Sep 08, 2015

Featured Projects / Slides and Notes

• Visualizing Flexbox - A neat little CodePen Demo to play around with Flex properties.

Aug 25, 2015

Newsletter

• CSS Layout News

• CSS Weekly

Guides

• What IS Flexbox?

Aug 02, 2015

Guides

• flexbox (pt-br)

Jul 19, 2015

Presentations / Videos

• Flexbox - CSS Day

Jul 17, 2015

Presentations / Videos

• Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap

Jun 29, 2015

Presentations / Videos

• Guía Completa de Flexbox desde 0 (ESP)

Jun 28, 2015

Who to Follow / Slides and Notes

• Afonso Pacifer @afonsopacifer

• Rachel Andrew @rachelandrew

Jun 23, 2015

Books

• CSS3 Layout Modules 2nd Edition - Rachel Andrew

Jun 21, 2015

Presentations / Videos

• CSS Layout o ontem, o hoje e o depois (pt-br)

Jun 20, 2015

Who to Follow / Slides and Notes

• Richard Herrera @doctyper

Jun 16, 2015

Cross Browser / Preprocessors in action

• Stylus flex mixin (⭐11)

Jun 14, 2015

Libraries and Frameworks / Slides and Notes

• Flex Grid Framework🤘

Jun 07, 2015

Featured Projects / Slides and Notes

• Cool examples of flexbox layout - A codepen a collection.

Jun 02, 2015

Cross Browser / Articles

• Advanced cross-browser flexbox

May 22, 2015

Cross Browser / Articles

• Normalizando bugs no flexbox em diversos navegadores (pt-br)

May 15, 2015

Featured Projects / Slides and Notes

• flex-box (⭐2) - A Custom Element to make the basics of flexbox easier to use.

• Flexbugs (⭐13k) - A community-curated list of flexbox issues and cross-browser workarounds for them.

• Solved by flexbox (⭐13k) - A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.🤘

May 12, 2015

Who to Follow / Slides and Notes

• Brad Frost @brad_frost

• Lea Verou @LeaVerou

• Philip Walton @philwalton

May 11, 2015

Guides

• A guide to flexbox🤘

• A visual guide to CSS3 flexbox properties

• 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

Cross Browser / Articles

• Are we ready to use flexbox?

• Normalizing cross-browser Flexbox bugs

• Using flexbox: mixing old and new for the best browser support

Cross Browser / Support

• Caniuse

Other Interesting Articles / Polyfills

• Designing CSS layouts with flexbox is as easy as pie

• Old flexbox and new flexbox

• Using flexbox today

Presentations / Videos

• Leveling up with flexbox

Sketching with CSS Flexbox Guide by @sfioritto / Slides and Notes

• Building responsive layouts presentation

• CSS3 layout

• Flexbox

• Future css layout fowd

• Leveling up with flexbox

• RWD flexbox

Tools / Slides and Notes

• CSS flexbox please

• Flexplorer

• Flexyboxes

Libraries and Frameworks / Slides and Notes

• Bem grid (⭐135)

• Flexboxgrid (⭐9.3k)🤘

Who to Follow / Slides and Notes

• Mickley Gillenwater @zomigi

May 09, 2015

W3C Specification

• CSS Flexible Box Layout Module Level 1

Cross Browser / Preprocessors in action

• Sass flex mixin (⭐1.1k)

Tools / Slides and Notes

• Fibonacci (⭐438)