User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome Flexbox

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

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: Oct. 20, 2021, 9:04 a.m.

Thank you afonsopacifer & contributors
View Topic on GitHub:
afonsopacifer/awesome-flexbox

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

W3C Specification

Newsletter

Books

Guides

Articles

Support

Preprocessors in action

Flexbox mixins

1.14K
248
3y 9m
MIT

sass-flex-mixin in stylus edition

11
2
7y 4m
n/a

Polyfills

A JavaScript polyfill for Flexbox

4.35K
535
3y 72d
MIT

Legacy support for the CSS3 Flexible Box Model

1.12K
123
8y 6m
n/a

A grown-up polyfill for a grown-up flexbox.

257
16
8y 111d
n/a

Other Interesting Articles

Videos

Read Materials

Video Materials

Slides and Notes

Tools

Libraries and Frameworks

Modular grid powered by Lost and BEM

137
18
4y 8m
n/a

Grid based on CSS3 flexbox

9.13K
1.16K
3y 75d
n/a

flexbox library to create amazing layouts

8
0
2y 12m
MIT

A minimal flexbox grid system named after a cute dog.

29
7
1y 71d
MIT

A modern CSS framework based on Flexbox. Also has Sass import for modification.

A minimalist CSS framework

Just a responsive flexbox grid

An easy to use flexbox grid system

Featured Projects

A Custom Element to aid usage of flexbox

2
3
6y 9m
n/a

A community-curated list of flexbox issues and cross-browser workarounds for them.

12.72K
448
1y 6m
MIT

Flexbox for Android

16.49K
1.73K
1y 29d
Apache-2.0

FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.

1.32K
126
1y 28d
MIT

This package has moved and renamed

2.08K
116
2y 76d
MIT

work in progress.

29
1
5y 4m
MIT

React flexbox implementation

163
13
3y 10m
n/a

Moved to https://rebassjs.org

1.37K
72
3y 9m
n/a

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

12.82K
1.05K
10m
MIT

A game for learning CSS flexbox.

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

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

Understand how to calculate the width of flex items.

Style mixins for cross-platform flex-box layouts

A neat little CodePen Demo to play around with Flex properties.

Courses

Who to Follow

Web designer, speaker, writer, consultant, musician.

Designer @CodePen. Writer @Real_CSS_Tricks.

Web designer/developer specializing in CSS, RWD, UX, & accessibility.

Software Engineer at @twitter.

Engineer at Google • Open Source Advocate • Developer • Designer • Writer.

Web Developer, half of @grabaperch CMS, CSS Working Group Invited Expert.

Author of the @Codrops CSS Reference & Co-author of the Smashing Book #5.