Courses & TutorialsProgramming

Awesome CSS Flexbox – Massive Collection of Resources

Spread the love

A curated list of CSS Flexible Box Layout Module or only Flexbox.
Inspired by awesome-webcomponents and awesome-svg.

Table of Contents

W3C Specification

The specification describes a CSS box model optimized for user interface design.




Guides for developers or designer start their studies this wonderful technology.

Cross Browser

Tips and tricks for your projects work anywhere 😀



Preprocessors in action


Other Interesting Articles

A list of issues related to flexbox.


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


Sketching with CSS Flexbox Guide by @sfioritto

Read Materials

Video Materials

Slides and Notes


Have a little help to create their projects 😀

Libraries and Frameworks

A list of incredible libraries based on flexbox.

Featured Projects

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 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 – FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.
  • FlexLayout for iOS – FlexLayout brings flexbox to iOS using Swift. Concise, intuitive & chainable syntax.
  • grid-styled – Flexbox based responsive ReactJS grid system built with styled-components
  • iron-flex-layout – Style mixins for cross-platform flex-box layouts
  • Post Apocalypse Flexbox
  • React-flexbox – Implementation of css flexbox in react with inline styles.
  • Reflexbox – Responsive React flexbox grid system higher order component.
  • Solved by flexbox – 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.


Who to Follow

People who talk about it.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button