/awesome-flexbox

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

MIT LicenseMIT

awesome flexbox

Build Status Awesome

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.

Newsletter

Books

Guides

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

Cross Browser

Tips and tricks for your projects work anywhere :D

Articles

Support

Preprocessors in action

Polyfills

Other Interesting Articles

A list of issues related to flexbox.

Presentations

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

Videos

Read Materials

Video Materials

Slides and Notes

Tools

Have a little help to create their projects :D

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.:metal:
  • 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.

Courses

Who to Follow

People who talk about it.

Contributing

Want to contribute? Follow these recommendations.

License

MIT License © Afonso Pacifer