Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/afonsopacifer/awesome-flexbox

:eyeglasses: A curated list of CSS Flexible Box Layout Module or only Flexbox.
https://github.com/afonsopacifer/awesome-flexbox

List: awesome-flexbox

awesome css css-flexbox css3 flexbox flexbox-grid flexbox-layout hacktoberfest hacktoberfest2022 w3c-specification

Last synced: 2 months ago
JSON representation

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

Awesome Lists containing this project

README 

        
[![awesome flexbox](awesome-flexbox.jpg)](https://github.com/afonsopacifer/awesome-flexbox/)



[![Build Status](https://travis-ci.org/afonsopacifer/awesome-flexbox.svg?branch=master)](https://travis-ci.org/afonsopacifer/awesome-flexbox)

[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)



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

Inspired by [awesome-webcomponents](https://github.com/obetomuniz/awesome-webcomponents) and [awesome-svg](https://github.com/willianjusten/awesome-svg).



## Table of Contents

* [W3C Specification](#w3c-specification)

* [Newsletter](#newsletter)

* [Books](#books)

* [Guides](#guides)

* [Cross Browser](#cross-browser)

 * [Articles](#articles)

 * [Support](#support)

 * [Preprocessors in Action](#preprocessors-in-action)

 * [Polyfills](#polyfills)

* [Other Interesting Articles](#other-interesting-articles)

* [Presentations](#presentations)

 * [Videos](#videos)

 * [Slides and Notes](#slides-and-notes)

* [Tools](#tools)

* [Libraries and Frameworks](#libraries-and-frameworks)

* [Featured Projects](#featured-projects)

* [Courses](#courses)

* [Who to Follow](#who-to-follow)

* [Contributing](#contributing)

* [Licence](#licence)



## W3C Specification

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

* [CSS Flexible Box Layout Module Level 1](http://www.w3.org/TR/css3-flexbox/)



## Newsletter

* [CSS Layout News](http://csslayout.news/)

* [CSS Weekly](http://css-weekly.com/)

* [Responsive Design Weekly](http://responsivedesignweekly.com/)

* [Web Design Weekly](https://web-design-weekly.com/)



## Books

* [CSS3 Layout Modules 2nd Edition - Rachel Andrew](http://rachelandrew.co.uk/books/css3-layout-modules)



## Guides

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

* [A guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/):metal:

* [A visual guide to CSS3 flexbox properties](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)

* [flexbox (pt-br)](http://desenvolvimentoparaweb.com/css/flexbox/)

* [Dive into flexbox](http://bocoup.com/weblog/dive-into-flexbox/)

* [How Flexbox works — explained with big, colorful, animated gifs](https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35)

* [How Flexbox works — explained with big, colorful, animated gifs (pt-br)](https://medium.com/@lucasjs/como-o-flexbox-funciona-explicado-com-gifs-grandes-e-coloridos-26c42a0bcdc)

* [Learn layout - flexbox (pt-br)](http://pt-br.learnlayout.com/flexbox.html)

* [Learn layout - flexbox](http://learnlayout.com/flexbox.html)

* [Reference of flexbox](http://tympanus.net/codrops/css_reference/flexbox/)

* [Responsive design of the future with flexbox](http://blog.teamtreehouse.com/responsive-design-of-the-future-with-flexbox)

* [The Flexbox Reading List: Techniques and Tools](https://www.smashingmagazine.com/author/cosima-mielke/)

* [Um guia visual para Flexbox (pt-br)](http://edsonjunior.com/um-guia-visual-para-flexbox/)

* [Usando caixas flexiveis CSS (pt-br)](https://developer.mozilla.org/pt-BR/docs/CSS/Usando_caixas_flexiveis_css)

* [Using CSS flexible boxes](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

* [What IS Flexbox?](https://medium.com/@spaceninja/what-is-flexbox-6aed968555ef)

* [Desarrollo de aplicaciones web Flexibles (es-es)](http://nucliweb.github.io/flexbox/)

* [Webflow Flexbox](https://flexbox.webflow.com/)



## Cross Browser

*Tips and tricks for your projects work anywhere :D*



#### Articles

* [6 Reasons to Start Using Flexbox](http://bitsofco.de/6-reasons-to-start-using-flexbox/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=email&utm_source=CSS_Layout_News_31)

* [Advanced cross-browser flexbox](https://dev.opera.com/articles/advanced-cross-browser-flexbox/)

* [Are we ready to use flexbox?](http://www.sitepoint.com/are-we-ready-to-use-flexbox/)

* [CSS Flexbox Is Entirely Logical (Almost)](https://paulrobertlloyd.com/2016/03/logical_flexbox)

* [Designing A Product Page Layout with Flexbox](https://css-tricks.com/designing-a-product-page-layout-with-flexbox/)

* [Normalizando bugs no flexbox em diversos navegadores (pt-br)](http://imasters.com.br/front-end/css/normalizando-bugs-no-flexbox-em-diversos-navegadores/?trace=1519021197&source=single)

* [Normalizing cross-browser Flexbox bugs](http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/)

* [Using flexbox: mixing old and new for the best browser support](https://css-tricks.com/using-flexbox/)

* [Using Modernizr with Flexbox](http://zomigi.com/blog/using-modernizr-with-flexbox/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=email&utm_source=CSS_Layout_News_8)



#### Support

* [Caniuse](http://caniuse.com/flexbox)



#### Preprocessors in action

* [Compass Flexbox](http://compass-style.org/reference/compass/css3/flexbox/)

* [Sass flex mixin](https://github.com/mastastealth/sass-flex-mixin)

* [Stylus flex mixin](https://github.com/differui/stylus-flex-mixin)



#### Polyfills

* [Flexibility](https://github.com/10up/flexibility):metal:

* [Flexie](https://github.com/doctyper/flexie)

* [Reflexie](https://github.com/doctyper/reflexie)



## Other Interesting Articles

*A list of issues related to flexbox.*

* [Almost complete guide to flexbox (without flexbox)](http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox?utm_campaign=CSS%2BLayout%2BNews&utm_medium=email&utm_source=CSS_Layout_News_36):metal:

* [Designing CSS layouts with flexbox is as easy as pie](http://www.smashingmagazine.com/2015/03/02/harnessing-flexbox-for-todays-web-apps/)

* [Flexbox For Interfaces All The Way: Tracks Case Study](http://www.smashingmagazine.com/2015/11/flexbox-interfaces-tracks-case-study/?utm_source=html5weekly&utm_medium=email)

* [Flexbox’s Best-Kept Secret](https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.i0v3krqo0)

* [Grid, Flexbox, Box Alignment: Our New System for Layout](https://24ways.org/2015/grid-flexbox-box-alignment-our-new-system-for-layout/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=email&utm_source=CSS_Layout_News_20)

* [Old flexbox and new flexbox](https://css-tricks.com/old-flexbox-and-new-flexbox/)

* [Using flexbox today](https://chriswrightdesign.com/experiments/using-flexbox-today/)

* [Laying Out A Flexible Future For Web Design With Flexbox](https://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/)

* [Flexbox Cheatsheet](http://jonibologna.com/flexbox-cheatsheet/)



## Presentations

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



#### Videos

* [CSS Layout o ontem, o hoje e o depois (pt-br)](https://www.youtube.com/watch?v=MjK1MCjqmpU&list=PLnjYA3TxpDpgWE9cXwT5H7wEsG6ql-Q59&index=15)

* [CSS FlexBox Essentials](https://www.youtube.com/watch?v=G7EIAgfkhmg)

* [CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)](https://www.youtube.com/watch?v=H1lREysgdgc)

* [Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap](https://css-tricks.com/video-screencasts/140-exploring-css-layout-techniques-while-trying-to-get-a-subtitle-to-wrap/)

* [Enhancing Responsiveness With Flexbox](https://www.youtube.com/watch?v=_98SE8WUvLk)

* [Flexbox - CSS Day](https://vimeo.com/131664957)

* [Guía Completa de Flexbox desde 0 (ESP)](https://www.youtube.com/watch?v=F-KCncXMPk0)

* [HTML5. Desenvolvimento avançado](https://www.youtube.com/watch?v=b9ZrOdTFkNk)

* [Introduction to Flexbox](https://mijingo.com/lessons/guide-to-flexbox/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=email&utm_source=CSS_Layout_News_34)

* [Leveling up with flexbox](https://vimeo.com/96406277)

* [What the flexbox?](http://flexbox.io) - A simple 20 video course that will help you master

* [Flexbox Fundamentals](https://egghead.io/lessons/misc-flexbox-fundamentals)



### [Sketching with CSS](http://www.sketchingwithcss.com) Flexbox Guide by [@sfioritto](https://github.com/sfioritto)



#### Read Materials

* [Access 20+ Page Guide on Flexbox](http://www.sketchingwithcss.com/flexbox-tutorial/)



#### Video Materials

* [Flex-Container Pt. 1: Position Items within a flexbox container](http://www.sketchingwithcss.com/flex-container)

* [Flex-Container Pt. 2: Rows and Columns](http://www.sketchingwithcss.com/flex-container-2/)

* [Grow and Shrink Flex Items](http://www.sketchingwithcss.com/grow-shrink/)

* [Implementing the Sticky Footer and Holy Grail layout](http://www.sketchingwithcss.com/flex-layouts/)



#### Slides and Notes

* [Building responsive layouts presentation](http://zomigi.com/blog/responsive-layouts-css-dev-conf/)

* [CSS Flexbox: Estruturando layouts sem gambiarras (pr-br)](https://speakerdeck.com/afonsopacifer/flexbox)

* [CSS3 layout](http://zomigi.com/blog/css3-layout/)

* [Flexbox](http://zomigi.com/blog/flexbox-presentation/)

* [Flexbox and Grid Layout](http://pt.slideshare.net/diegoeis/flexbox-to-the-people)

* [Future css layout fowd](http://zomigi.com/blog/future-css-layout-fowd/)

* [Leveling up with flexbox](http://zomigi.com/blog/leveling-up-with-flexbox/)

* [RWD flexbox](http://zomigi.com/blog/rwd-flexbox/)

* [CSS Layout: from Table to Flexbox](https://speakerdeck.com/diogomoretti/css-layout-from-table-to-flexbox)



## Tools

*Have a little help to create their projects :D*

* [Build with Flexbox](http://flexbox.buildwithreact.com/)

* [CSS flexbox please](http://demo.agektmr.com/flexbox/)

* [CSS Flexbox snippets for Atom](https://github.com/brenopolanski/css-flexbox-atom-snippets)

* [CSS Flexbox snippets for Sublime Text 2/3](https://github.com/brenopolanski/css-flexbox-sublime-snippets)

* [Fibonacci](https://github.com/maxsteenbergen/Fibonacci)

* [Flexbox in 5 minutes](https://cvan.io/flexboxin5/)

* [Flexbox playground](https://web.archive.org/web/20151207135410/http://flexiejs.com/playground/)

* [Flexbox property manipulator](http://codepen.io/enxaneta/full/adLPwv/)

* [Flexplorer](http://bennettfeely.com/flexplorer/)

* [Flexyboxes](http://the-echoplex.net/flexyboxes/)

* [Test CSS Flexbox Rules Live](http://flexbox.help/)

* [Try Flexbox](https://zyxneo.github.io/flexbox/try-flexbox)



## Libraries and Frameworks

*A list of incredible libraries based on flexbox.*

* [Bem grid](https://github.com/bem-incubator/bem-grid)

* [Flexboxgrid](https://github.com/kristoferjoseph/flexboxgrid):metal:

* [Flex Grid Framework](https://afonsopacifer.github.io/flex-grid-framework/):metal:

* [Flexbox Grid for Stylus](http://stylusgrid.com)

* [Fuux](https://github.com/henriquecustodia/fuux) - Fuux is a Flexbox library that uses the same flexbox interface like classes.

* [Ginger Grid](https://github.com/erwstout/ginger/) - A Flexbox grid framework named after a cute dog.

* [Bulma](http://bulma.io/) - A modern CSS framework based on Flexbox

* [Milligram](http://milligram.github.io/) - A minimalist CSS framework

* [RolleiFLEX](http://kaisermann.github.io/rolleiflex/) - Just a responsive flexbox grid

* [Waffle Grid](https://lucasgruwez.github.io/waffle-grid) - An easy to use flexbox grid system



## Featured Projects

*Awesome projects about flexbox.*

* [Cool examples of flexbox layout](http://codepen.io/collection/KegmA/) - A codepen a collection.

* [flex-box](https://github.com/potch/flex-box) - A Custom Element to make the basics of flexbox easier to use.

* [Flexbugs](https://github.com/philipwalton/flexbugs) - A community-curated list of flexbox issues and cross-browser workarounds for them.

* [Flexbox Froggy](http://flexboxfroggy.com/) - A game for learning CSS flexbox.

* [Flexbox Patterns](http://www.flexboxpatterns.com/) - Examples and source code that will teach you how to build UI components with CSS flexbox! What’s flexbox?

* [Flexbox Defense](http://www.flexboxdefense.com/) - Tower Defense with a twist: all towers must be positioned with CSS Flexbox.

* [Flexbox tester](http://madebymike.com.au/demos/flexbox-tester/) - Understand how to calculate the width of flex items.

* [Flexbox layout](https://github.com/google/flexbox-layout) - FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.

* [FlexLayout for iOS](https://github.com/lucdion/FlexLayout) - FlexLayout brings flexbox to iOS using Swift. Concise, intuitive & chainable syntax.

* [grid-styled](https://github.com/jxnblk/grid-styled) - Flexbox based responsive ReactJS grid system built with styled-components

* [iron-flex-layout](https://www.webcomponents.org/element/PolymerElements/iron-flex-layout) - Style mixins for cross-platform flex-box layouts

* [Post Apocalypse Flexbox](https://github.com/afonsopacifer/post-apocalypse-flexbox)

* [React-flexbox](https://github.com/tcoopman/react-flexbox) - Implementation of css flexbox in react with inline styles.

* [Reflexbox](https://github.com/jxnblk/reflexbox) - Responsive React flexbox grid system higher order component.

* [Solved by flexbox](https://github.com/philipwalton/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](http://codepen.io/paultrone/pen/xwxNmQ?utm_campaign=CSS%2BLayout%2BNews&utm_medium=email&utm_source=CSS_Layout_News_6) - A neat little CodePen Demo to play around with Flex properties.

* [ZEEF CSS Flexbox](https://css-flexbox.zeef.com/afonso.pacifer) - The awesome flexbox on zeef.:metal:

* [Flexbox Zombies](http://flexboxzombies.com/p/flexbox-zombies) - A game for learning CSS flexbox.



## Courses

* [CSS Flexbox Layout](https://teamtreehouse.com/library/css-flexbox-layout?utm_source=Responsive+Design+Weekly&utm_campaign=e4dbc18ebc-Responsive_Design_Weekly_184&utm_medium=email&utm_term=0_df65b6d7c8-e4dbc18ebc-59080665&goal=0_df65b6d7c8-e4dbc18ebc-59080665) - treehouse

* [Learn Flexbox for free](https://scrimba.com/g/gflexbox) - scrimba



## Who to Follow

*People who talk about it.*

* Afonso Pacifer [@afonsopacifer](https://twitter.com/afonsopacifer)

* Brad Frost [@brad_frost](https://twitter.com/brad_frost)

* Chris Coyier [@chriscoyier](https://twitter.com/chriscoyier)

* Lea Verou [@LeaVerou](https://twitter.com/leaverou)

* Mickley Gillenwater [@zomigi](https://twitter.com/zomigi)

* Nicolas [@necolas](https://twitter.com/necolas)

* Philip Walton [@philwalton](https://twitter.com/philwalton)

* Rachel Andrew [@rachelandrew](https://twitter.com/rachelandrew)

* Richard Herrera [@doctyper](https://twitter.com/doctyper)

* Sara Soueidan [@SaraSoueidan](https://twitter.com/SaraSoueidan)

* Sean Fioritto [@sfioritto](https://twitter.com/sfioritto)



## Contributing

Want to contribute? [Follow these recommendations](https://github.com/afonsopacifer/awesome-flexbox/blob/master/contributing.md).



## License

[MIT License](https://github.com/afonsopacifer/awesome-flexbox/blob/master/license.md) © [Afonso Pacifer](https://afonsopacifer.github.io/)