{"id":156,"url":"https://github.com/afonsopacifer/awesome-flexbox","last_synced_at":"2025-10-04T05:31:41.162Z","repository":{"id":31772049,"uuid":"35338369","full_name":"afonsopacifer/awesome-flexbox","owner":"afonsopacifer","description":":eyeglasses: A curated list of CSS Flexible Box Layout Module or only Flexbox.","archived":false,"fork":false,"pushed_at":"2023-09-07T11:46:40.000Z","size":226,"stargazers_count":1252,"open_issues_count":4,"forks_count":119,"subscribers_count":62,"default_branch":"master","last_synced_at":"2025-10-02T22:02:45.135Z","etag":null,"topics":["awesome","css","css-flexbox","css3","flexbox","flexbox-grid","flexbox-layout","hacktoberfest","hacktoberfest2022","w3c-specification"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/afonsopacifer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-05-09T17:37:01.000Z","updated_at":"2025-10-02T05:03:56.000Z","dependencies_parsed_at":"2024-01-18T00:30:23.229Z","dependency_job_id":"0e864c26-e323-4b35-8a05-71043232c291","html_url":"https://github.com/afonsopacifer/awesome-flexbox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/afonsopacifer/awesome-flexbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afonsopacifer%2Fawesome-flexbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afonsopacifer%2Fawesome-flexbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afonsopacifer%2Fawesome-flexbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afonsopacifer%2Fawesome-flexbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/afonsopacifer","download_url":"https://codeload.github.com/afonsopacifer/awesome-flexbox/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afonsopacifer%2Fawesome-flexbox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278267497,"owners_count":25958876,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","css","css-flexbox","css3","flexbox","flexbox-grid","flexbox-layout","hacktoberfest","hacktoberfest2022","w3c-specification"],"created_at":"2024-01-05T20:12:47.886Z","updated_at":"2025-10-04T05:31:41.124Z","avatar_url":"https://github.com/afonsopacifer.png","language":null,"funding_links":[],"categories":["Front-End Development","Technical","CSS","Other Domains in CS","Uncategorized","Front-end Development","Others","Alx-Frontend-For-Fun :file_folder:","Live Site:   [searchAwesome](https://search-awesome.vercel.app/)","前端开发","Other Lists","前端","Themed Directories"],"sub_categories":["awesome-*","GRID CSS e FLEXBOX","Uncategorized","Flexbox","Misc","TeX Lists","Updated more than a year ago"],"readme":"[![awesome flexbox](awesome-flexbox.jpg)](https://github.com/afonsopacifer/awesome-flexbox/)\n\n[![Build Status](https://travis-ci.org/afonsopacifer/awesome-flexbox.svg?branch=master)](https://travis-ci.org/afonsopacifer/awesome-flexbox)\n[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)\n\n\u003e A curated list of CSS Flexible Box Layout Module or only Flexbox.\nInspired by [awesome-webcomponents](https://github.com/obetomuniz/awesome-webcomponents) and [awesome-svg](https://github.com/willianjusten/awesome-svg).\n\n## Table of Contents\n* [W3C Specification](#w3c-specification)\n* [Newsletter](#newsletter)\n* [Books](#books)\n* [Guides](#guides)\n* [Cross Browser](#cross-browser)\n * [Articles](#articles)\n * [Support](#support)\n * [Preprocessors in Action](#preprocessors-in-action)\n * [Polyfills](#polyfills)\n* [Other Interesting Articles](#other-interesting-articles)\n* [Presentations](#presentations)\n * [Videos](#videos)\n * [Slides and Notes](#slides-and-notes)\n* [Tools](#tools)\n* [Libraries and Frameworks](#libraries-and-frameworks)\n* [Featured Projects](#featured-projects)\n* [Courses](#courses)\n* [Who to Follow](#who-to-follow)\n* [Contributing](#contributing)\n* [Licence](#licence)\n\n## W3C Specification\n*The specification describes a CSS box model optimized for user interface design.*\n* [CSS Flexible Box Layout Module Level 1](http://www.w3.org/TR/css3-flexbox/)\n\n## Newsletter\n* [CSS Layout News](http://csslayout.news/)\n* [CSS Weekly](http://css-weekly.com/)\n* [Responsive Design Weekly](http://responsivedesignweekly.com/)\n* [Web Design Weekly](https://web-design-weekly.com/)\n\n\n## Books\n* [CSS3 Layout Modules 2nd Edition - Rachel Andrew](http://rachelandrew.co.uk/books/css3-layout-modules)\n\n## Guides\n*Guides for developers or designer start their studies this wonderful technology.*\n* [A guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/):metal:\n* [A visual guide to CSS3 flexbox properties](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)\n* [flexbox (pt-br)](http://desenvolvimentoparaweb.com/css/flexbox/)\n* [Dive into flexbox](http://bocoup.com/weblog/dive-into-flexbox/)\n* [How Flexbox works — explained with big, colorful, animated gifs](https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35)\n* [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)\n* [Learn layout - flexbox (pt-br)](http://pt-br.learnlayout.com/flexbox.html)\n* [Learn layout - flexbox](http://learnlayout.com/flexbox.html)\n* [Reference of flexbox](http://tympanus.net/codrops/css_reference/flexbox/)\n* [Responsive design of the future with flexbox](http://blog.teamtreehouse.com/responsive-design-of-the-future-with-flexbox)\n* [The Flexbox Reading List: Techniques and Tools](https://www.smashingmagazine.com/author/cosima-mielke/)\n* [Um guia visual para Flexbox (pt-br)](http://edsonjunior.com/um-guia-visual-para-flexbox/)\n* [Usando caixas flexiveis CSS (pt-br)](https://developer.mozilla.org/pt-BR/docs/CSS/Usando_caixas_flexiveis_css)\n* [Using CSS flexible boxes](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n* [What IS Flexbox?](https://medium.com/@spaceninja/what-is-flexbox-6aed968555ef)\n* [Desarrollo de aplicaciones web Flexibles (es-es)](http://nucliweb.github.io/flexbox/)\n* [Webflow Flexbox](https://flexbox.webflow.com/)\n\n## Cross Browser\n*Tips and tricks for your projects work anywhere :D*\n\n#### Articles\n* [6 Reasons to Start Using Flexbox](http://bitsofco.de/6-reasons-to-start-using-flexbox/?utm_campaign=CSS%2BLayout%2BNews\u0026utm_medium=email\u0026utm_source=CSS_Layout_News_31)\n* [Advanced cross-browser flexbox](https://dev.opera.com/articles/advanced-cross-browser-flexbox/)\n* [Are we ready to use flexbox?](http://www.sitepoint.com/are-we-ready-to-use-flexbox/)\n* [CSS Flexbox Is Entirely Logical (Almost)](https://paulrobertlloyd.com/2016/03/logical_flexbox)\n* [Designing A Product Page Layout with Flexbox](https://css-tricks.com/designing-a-product-page-layout-with-flexbox/)\n* [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\u0026source=single)\n* [Normalizing cross-browser Flexbox bugs](http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/)\n* [Using flexbox: mixing old and new for the best browser support](https://css-tricks.com/using-flexbox/)\n* [Using Modernizr with Flexbox](http://zomigi.com/blog/using-modernizr-with-flexbox/?utm_campaign=CSS%2BLayout%2BNews\u0026utm_medium=email\u0026utm_source=CSS_Layout_News_8)\n\n#### Support\n* [Caniuse](http://caniuse.com/flexbox)\n\n#### Preprocessors in action\n* [Compass Flexbox](http://compass-style.org/reference/compass/css3/flexbox/)\n* [Sass flex mixin](https://github.com/mastastealth/sass-flex-mixin)\n* [Stylus flex mixin](https://github.com/differui/stylus-flex-mixin)\n\n#### Polyfills\n* [Flexibility](https://github.com/10up/flexibility):metal:\n* [Flexie](https://github.com/doctyper/flexie)\n* [Reflexie](https://github.com/doctyper/reflexie)\n\n## Other Interesting Articles\n*A list of issues related to flexbox.*\n* [Almost complete guide to flexbox (without flexbox)](http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox?utm_campaign=CSS%2BLayout%2BNews\u0026utm_medium=email\u0026utm_source=CSS_Layout_News_36):metal:\n* [Designing CSS layouts with flexbox is as easy as pie](http://www.smashingmagazine.com/2015/03/02/harnessing-flexbox-for-todays-web-apps/)\n* [Flexbox For Interfaces All The Way: Tracks Case Study](http://www.smashingmagazine.com/2015/11/flexbox-interfaces-tracks-case-study/?utm_source=html5weekly\u0026utm_medium=email)\n* [Flexbox’s Best-Kept Secret](https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.i0v3krqo0)\n* [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\u0026utm_medium=email\u0026utm_source=CSS_Layout_News_20)\n* [Old flexbox and new flexbox](https://css-tricks.com/old-flexbox-and-new-flexbox/)\n* [Using flexbox today](https://chriswrightdesign.com/experiments/using-flexbox-today/)\n* [Laying Out A Flexible Future For Web Design With Flexbox](https://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/)\n* [Flexbox Cheatsheet](http://jonibologna.com/flexbox-cheatsheet/)\n\n## Presentations\n*Tired of reading? See an interactive presentation and learn flexbox now.*\n\n#### Videos\n* [CSS Layout o ontem, o hoje e o depois (pt-br)](https://www.youtube.com/watch?v=MjK1MCjqmpU\u0026list=PLnjYA3TxpDpgWE9cXwT5H7wEsG6ql-Q59\u0026index=15)\n* [CSS FlexBox Essentials](https://www.youtube.com/watch?v=G7EIAgfkhmg)\n* [CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)](https://www.youtube.com/watch?v=H1lREysgdgc)\n* [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/)\n* [Enhancing Responsiveness With Flexbox](https://www.youtube.com/watch?v=_98SE8WUvLk)\n* [Flexbox - CSS Day](https://vimeo.com/131664957)\n* [Guía Completa de Flexbox desde 0 (ESP)](https://www.youtube.com/watch?v=F-KCncXMPk0)\n* [HTML5. Desenvolvimento avançado](https://www.youtube.com/watch?v=b9ZrOdTFkNk)\n* [Introduction to Flexbox](https://mijingo.com/lessons/guide-to-flexbox/?utm_campaign=CSS%2BLayout%2BNews\u0026utm_medium=email\u0026utm_source=CSS_Layout_News_34)\n* [Leveling up with flexbox](https://vimeo.com/96406277)\n* [What the flexbox?](http://flexbox.io) - A simple 20 video course that will help you master\n* [Flexbox Fundamentals](https://egghead.io/lessons/misc-flexbox-fundamentals)\n\n\n### [Sketching with CSS](http://www.sketchingwithcss.com) Flexbox Guide by [@sfioritto](https://github.com/sfioritto)\n\n#### Read Materials\n* [Access 20+ Page Guide on Flexbox](http://www.sketchingwithcss.com/flexbox-tutorial/)\n\n#### Video Materials\n* [Flex-Container Pt. 1: Position Items within a flexbox container](http://www.sketchingwithcss.com/flex-container)\n* [Flex-Container Pt. 2: Rows and Columns](http://www.sketchingwithcss.com/flex-container-2/)\n* [Grow and Shrink Flex Items](http://www.sketchingwithcss.com/grow-shrink/)\n* [Implementing the Sticky Footer and Holy Grail layout](http://www.sketchingwithcss.com/flex-layouts/)\n\n#### Slides and Notes\n* [Building responsive layouts presentation](http://zomigi.com/blog/responsive-layouts-css-dev-conf/)\n* [CSS Flexbox: Estruturando layouts sem gambiarras (pr-br)](https://speakerdeck.com/afonsopacifer/flexbox)\n* [CSS3 layout](http://zomigi.com/blog/css3-layout/)\n* [Flexbox](http://zomigi.com/blog/flexbox-presentation/)\n* [Flexbox and Grid Layout](http://pt.slideshare.net/diegoeis/flexbox-to-the-people)\n* [Future css layout fowd](http://zomigi.com/blog/future-css-layout-fowd/)\n* [Leveling up with flexbox](http://zomigi.com/blog/leveling-up-with-flexbox/)\n* [RWD flexbox](http://zomigi.com/blog/rwd-flexbox/)\n* [CSS Layout: from Table to Flexbox](https://speakerdeck.com/diogomoretti/css-layout-from-table-to-flexbox)\n\n## Tools\n*Have a little help to create their projects :D*\n* [Build with Flexbox](http://flexbox.buildwithreact.com/)\n* [CSS flexbox please](http://demo.agektmr.com/flexbox/)\n* [CSS Flexbox snippets for Atom](https://github.com/brenopolanski/css-flexbox-atom-snippets)\n* [CSS Flexbox snippets for Sublime Text 2/3](https://github.com/brenopolanski/css-flexbox-sublime-snippets)\n* [Fibonacci](https://github.com/maxsteenbergen/Fibonacci)\n* [Flexbox in 5 minutes](https://cvan.io/flexboxin5/)\n* [Flexbox playground](https://web.archive.org/web/20151207135410/http://flexiejs.com/playground/)\n* [Flexbox property manipulator](http://codepen.io/enxaneta/full/adLPwv/)\n* [Flexplorer](http://bennettfeely.com/flexplorer/)\n* [Flexyboxes](http://the-echoplex.net/flexyboxes/)\n* [Test CSS Flexbox Rules Live](http://flexbox.help/)\n* [Try Flexbox](https://zyxneo.github.io/flexbox/try-flexbox)\n\n## Libraries and Frameworks\n*A list of incredible libraries based on flexbox.*\n* [Bem grid](https://github.com/bem-incubator/bem-grid)\n* [Flexboxgrid](https://github.com/kristoferjoseph/flexboxgrid):metal:\n* [Flex Grid Framework](https://afonsopacifer.github.io/flex-grid-framework/):metal:\n* [Flexbox Grid for Stylus](http://stylusgrid.com)\n* [Fuux](https://github.com/henriquecustodia/fuux) - Fuux is a Flexbox library that uses the same flexbox interface like classes.\n* [Ginger Grid](https://github.com/erwstout/ginger/) - A Flexbox grid framework named after a cute dog.\n* [Bulma](http://bulma.io/) - A modern CSS framework based on Flexbox\n* [Milligram](http://milligram.github.io/) - A minimalist CSS framework\n* [RolleiFLEX](http://kaisermann.github.io/rolleiflex/) - Just a responsive flexbox grid\n* [Waffle Grid](https://lucasgruwez.github.io/waffle-grid) - An easy to use flexbox grid system\n\n## Featured Projects\n*Awesome projects about flexbox.*\n* [Cool examples of flexbox layout](http://codepen.io/collection/KegmA/) - A codepen a collection.\n* [flex-box](https://github.com/potch/flex-box) - A Custom Element to make the basics of flexbox easier to use.\n* [Flexbugs](https://github.com/philipwalton/flexbugs) - A community-curated list of flexbox issues and cross-browser workarounds for them.\n* [Flexbox Froggy](http://flexboxfroggy.com/) - A game for learning CSS flexbox.\n* [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?\n* [Flexbox Defense](http://www.flexboxdefense.com/) - Tower Defense with a twist: all towers must be positioned with CSS Flexbox.\n* [Flexbox tester](http://madebymike.com.au/demos/flexbox-tester/) - Understand how to calculate the width of flex items.\n* [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.\n* [FlexLayout for iOS](https://github.com/lucdion/FlexLayout) - FlexLayout brings flexbox to iOS using Swift. Concise, intuitive \u0026 chainable syntax.\n* [grid-styled](https://github.com/jxnblk/grid-styled) - Flexbox based responsive ReactJS grid system built with styled-components\n* [iron-flex-layout](https://www.webcomponents.org/element/PolymerElements/iron-flex-layout) - Style mixins for cross-platform flex-box layouts\n* [Post Apocalypse Flexbox](https://github.com/afonsopacifer/post-apocalypse-flexbox)\n* [React-flexbox](https://github.com/tcoopman/react-flexbox) - Implementation of css flexbox in react with inline styles.\n* [Reflexbox](https://github.com/jxnblk/reflexbox) - Responsive React flexbox grid system higher order component.\n* [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:\n* [Visualizing Flexbox](http://codepen.io/paultrone/pen/xwxNmQ?utm_campaign=CSS%2BLayout%2BNews\u0026utm_medium=email\u0026utm_source=CSS_Layout_News_6) - A neat little CodePen Demo to play around with Flex properties.\n* [ZEEF CSS Flexbox](https://css-flexbox.zeef.com/afonso.pacifer) - The awesome flexbox on zeef.:metal:\n* [Flexbox Zombies](http://flexboxzombies.com/p/flexbox-zombies) - A game for learning CSS flexbox.\n\n## Courses\n* [CSS Flexbox Layout](https://teamtreehouse.com/library/css-flexbox-layout?utm_source=Responsive+Design+Weekly\u0026utm_campaign=e4dbc18ebc-Responsive_Design_Weekly_184\u0026utm_medium=email\u0026utm_term=0_df65b6d7c8-e4dbc18ebc-59080665\u0026goal=0_df65b6d7c8-e4dbc18ebc-59080665) - treehouse\n* [Learn Flexbox for free](https://scrimba.com/g/gflexbox) - scrimba\n\n## Who to Follow\n*People who talk about it.*\n* Afonso Pacifer [@afonsopacifer](https://twitter.com/afonsopacifer)\n* Brad Frost [@brad_frost](https://twitter.com/brad_frost)\n* Chris Coyier [@chriscoyier](https://twitter.com/chriscoyier)\n* Lea Verou [@LeaVerou](https://twitter.com/leaverou)\n* Mickley Gillenwater [@zomigi](https://twitter.com/zomigi)\n* Nicolas [@necolas](https://twitter.com/necolas)\n* Philip Walton [@philwalton](https://twitter.com/philwalton)\n* Rachel Andrew [@rachelandrew](https://twitter.com/rachelandrew)\n* Richard Herrera [@doctyper](https://twitter.com/doctyper)\n* Sara Soueidan [@SaraSoueidan](https://twitter.com/SaraSoueidan)\n* Sean Fioritto [@sfioritto](https://twitter.com/sfioritto)\n\n## Contributing\nWant to contribute? [Follow these recommendations](https://github.com/afonsopacifer/awesome-flexbox/blob/master/contributing.md).\n\n## License\n[MIT License](https://github.com/afonsopacifer/awesome-flexbox/blob/master/license.md) © [Afonso Pacifer](https://afonsopacifer.github.io/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafonsopacifer%2Fawesome-flexbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafonsopacifer%2Fawesome-flexbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafonsopacifer%2Fawesome-flexbox/lists"}