Track Awesome Flexbox Updates Weekly

: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 30 - Oct 06, 2019

Courses / Slides and Notes

• Learn Flexbox for free - scrimba

Oct 23 - Oct 29, 2017

Featured Projects / Slides and Notes

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

Sep 11 - Sep 17, 2017

Featured Projects / Slides and Notes

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

Jul 31 - Aug 06, 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 17 - Jul 23, 2017

Featured Projects / Slides and Notes

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

Apr 03 - Apr 09, 2017

Guides

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

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

Mar 27 - Apr 02, 2017

Libraries and Frameworks / Slides and Notes

• RolleiFLEX - Just a responsive flexbox grid

Feb 27 - Mar 05, 2017

Libraries and Frameworks / Slides and Notes

• Waffle Grid - An easy to use flexbox grid system

Feb 20 - Feb 26, 2017

Tools / Slides and Notes

• Try Flexbox

Nov 07 - Nov 13, 2016

Libraries and Frameworks / Slides and Notes

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

Sep 26 - Oct 02, 2016

Featured Projects / Slides and Notes

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

Jun 27 - Jul 03, 2016

Other Interesting Articles / Polyfills

• Flexbox Cheatsheet

Jun 13 - 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 23 - May 29, 2016

Tools / Slides and Notes

• Build with Flexbox

May 09 - May 15, 2016

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

• CSS Layout: from Table to Flexbox

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 11 - Apr 17, 2016

Guides

• Webflow Flexbox

Other Interesting Articles / Polyfills

• Laying Out A Flexible Future For Web Design With Flexbox

Presentations / Videos

• HTML5. Desenvolvimento avançado

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

• Flexbox Fundamentals

Apr 04 - Apr 10, 2016

Other Interesting Articles / Polyfills

• Almost complete guide to flexbox (without flexbox)🤘

Mar 21 - Mar 27, 2016

Presentations / Videos

• Introduction to Flexbox

Mar 14 - Mar 20, 2016

Cross Browser / Articles

• CSS Flexbox Is Entirely Logical (Almost)

Who to Follow / Slides and Notes

• Sara Soueidan @SaraSoueidan

Mar 07 - Mar 13, 2016

Libraries and Frameworks / Slides and Notes

• Milligram - A minimalist CSS framework

Feb 29 - Mar 06, 2016

Newsletter

• Responsive Design Weekly

• Web Design Weekly

Cross Browser / Articles

• 6 Reasons to Start Using Flexbox

Featured Projects / Slides and Notes

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

Feb 22 - Feb 28, 2016

Guides

• The Flexbox Reading List: Techniques and Tools

Feb 01 - Feb 07, 2016

Guides

• Desarrollo de aplicaciones web Flexibles (es-es)

Libraries and Frameworks / Slides and Notes

• Bulma - A modern CSS framework based on Flexbox

Jan 25 - Jan 31, 2016

Cross Browser / Articles

• Designing A Product Page Layout with Flexbox

Tools / Slides and Notes

• Flexbox playground

• Flexbox property manipulator

Dec 28 - Jan 03, 2015

Guides

• Um guia visual para Flexbox (pt-br)

Cross Browser / Preprocessors in action

• Compass Flexbox

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 21 - Dec 27, 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

• Flexbox in 5 minutes

• Test CSS Flexbox Rules Live

Who to Follow / Slides and Notes

• Chris Coyier @chriscoyier

• Nicolas @necolas

Dec 07 - Dec 13, 2015

Other Interesting Articles / Polyfills

• Flexbox’s Best-Kept Secret

Featured Projects / Slides and Notes

• Flexbox Froggy - A game for learning CSS flexbox.

Nov 30 - Dec 06, 2015

Courses / Slides and Notes

• CSS Flexbox Layout - treehouse

Nov 09 - Nov 15, 2015

Other Interesting Articles / Polyfills

• Flexbox For Interfaces All The Way: Tracks Case Study

Nov 02 - Nov 08, 2015

Presentations / Videos

• Enhancing Responsiveness With Flexbox

Featured Projects / Slides and Notes

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

Oct 26 - Nov 01, 2015

Presentations / Videos

• CSS FlexBox Essentials

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

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

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

• Flexbox and Grid Layout

Libraries and Frameworks / Slides and Notes

• Flexbox Grid for Stylus

Featured Projects / Slides and Notes

• Post Apocalypse Flexbox (⭐29)

Oct 19 - Oct 25, 2015

Featured Projects / Slides and Notes

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

Oct 12 - Oct 18, 2015

Featured Projects / Slides and Notes

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

Sep 28 - Oct 04, 2015

Cross Browser / Articles

• Using Modernizr with Flexbox

Sep 14 - Sep 20, 2015

Featured Projects / Slides and Notes

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

Aug 31 - Sep 06, 2015

Newsletter

• CSS Layout News

• CSS Weekly

Guides

• What IS Flexbox?

Aug 03 - Aug 09, 2015

Guides

• flexbox (pt-br)

Jul 20 - Jul 26, 2015

Presentations / Videos

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

• Flexbox - CSS Day

Jul 06 - Jul 12, 2015

Presentations / Videos

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

Jun 29 - Jul 05, 2015

Books

• CSS3 Layout Modules 2nd Edition - Rachel Andrew

Who to Follow / Slides and Notes

• Afonso Pacifer @afonsopacifer

• Rachel Andrew @rachelandrew

Jun 22 - Jun 28, 2015

Cross Browser / Preprocessors in action

• Stylus flex mixin (⭐11)

Presentations / Videos

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

Who to Follow / Slides and Notes

• Richard Herrera @doctyper

Jun 15 - Jun 21, 2015

Libraries and Frameworks / Slides and Notes

• Flex Grid Framework🤘

Jun 08 - Jun 14, 2015

Cross Browser / Articles

• Advanced cross-browser flexbox

Featured Projects / Slides and Notes

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

May 25 - May 31, 2015

Cross Browser / Articles

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

May 18 - May 24, 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)🤘

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.🤘

Who to Follow / Slides and Notes

• Brad Frost @brad_frost

• Lea Verou @LeaVerou

• Mickley Gillenwater @zomigi

• Philip Walton @philwalton

May 11 - May 17, 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)