Flexbox
A curated list of CSS Flexible Box Layout Module or only Flexbox. Inspired by awesome-webcomponents and awesome-svg.
W3C Specification¶
The specification describes a CSS box model optimized for user interface design. * CSS Flexible Box Layout Module Level 1
Newsletter¶
Books¶
Guides¶
Guides for developers or designer start their studies this wonderful technology.
* A guide to flexbox
* A visual guide to CSS3 flexbox properties
* flexbox (pt-br)
* Dive into flexbox
* How Flexbox works — explained with big, colorful, animated gifs
* How Flexbox works — explained with big, colorful, animated gifs (pt-br)
* Learn layout - flexbox (pt-br)
* Learn layout - flexbox
* Reference of flexbox
* Responsive design of the future with flexbox
* The Flexbox Reading List: Techniques and Tools
* Um guia visual para Flexbox (pt-br)
* Usando caixas flexiveis CSS (pt-br)
* Using CSS flexible boxes
* What IS Flexbox?
* Desarrollo de aplicaciones web Flexibles (es-es)
* Webflow Flexbox
Cross Browser¶
Tips and tricks for your projects work anywhere :D
Articles¶
- 6 Reasons to Start Using Flexbox
- Advanced cross-browser flexbox
- Are we ready to use flexbox?
- CSS Flexbox Is Entirely Logical (Almost)
- Designing A Product Page Layout with Flexbox
- Normalizando bugs no flexbox em diversos navegadores (pt-br)
- Normalizing cross-browser Flexbox bugs
- Using flexbox: mixing old and new for the best browser support
- Using Modernizr with Flexbox
Support¶
Preprocessors in action¶
Polyfills¶
Other Interesting Articles¶
A list of issues related to flexbox.
* Almost complete guide to flexbox (without flexbox)
* Designing CSS layouts with flexbox is as easy as pie
* Flexbox For Interfaces All The Way: Tracks Case Study
* Flexbox’s Best-Kept Secret
* Grid, Flexbox, Box Alignment: Our New System for Layout
* Old flexbox and new flexbox
* Using flexbox today
* Laying Out A Flexible Future For Web Design With Flexbox
* 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)
- CSS FlexBox Essentials
- CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)
- Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap
- Enhancing Responsiveness With Flexbox
- Flexbox - CSS Day
- Guía Completa de Flexbox desde 0 (ESP)
- HTML5. Desenvolvimento avançado
- Introduction to Flexbox
- Leveling up with flexbox
- What the flexbox? - A simple 20 video course that will help you master
- Flexbox Fundamentals
Sketching with CSS Flexbox Guide by @sfioritto¶
Read Materials¶
Video Materials¶
- Flex-Container Pt. 1: Position Items within a flexbox container
- Flex-Container Pt. 2: Rows and Columns
- Grow and Shrink Flex Items
- Implementing the Sticky Footer and Holy Grail layout
Slides and Notes¶
- Building responsive layouts presentation
- CSS Flexbox: Estruturando layouts sem gambiarras (pr-br)
- CSS3 layout
- Flexbox
- Flexbox and Grid Layout
- Future css layout fowd
- Leveling up with flexbox
- RWD flexbox
- CSS Layout: from Table to Flexbox
Tools¶
Have a little help to create their projects :D * Build with Flexbox * CSS flexbox please * CSS Flexbox snippets for Atom * CSS Flexbox snippets for Sublime Text ⅔ * Fibonacci * Flexbox in 5 minutes * Flexbox playground * Flexbox property manipulator * Flexplorer * Flexyboxes * Test CSS Flexbox Rules Live * Try Flexbox
Libraries and Frameworks¶
A list of incredible libraries based on flexbox.
* Bem grid
* Flexboxgrid
* Flex Grid Framework
* Flexbox Grid for Stylus
* Fuux - Fuux is a Flexbox library that uses the same flexbox interface like classes.
* Ginger Grid - A Flexbox grid framework named after a cute dog.
* Bulma - A modern CSS framework based on Flexbox
* Milligram - A minimalist CSS framework
* RolleiFLEX - Just a responsive flexbox grid
* Waffle Grid - An easy to use flexbox grid system
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.
Courses¶
- CSS Flexbox Layout - treehouse
- Learn Flexbox for free - scrimba
Who to Follow¶
People who talk about it. * Afonso Pacifer @afonsopacifer * Brad Frost @brad_frost * Chris Coyier @chriscoyier * Lea Verou @LeaVerou * Mickley Gillenwater @zomigi * Nicolas @necolas * Philip Walton @philwalton * Rachel Andrew @rachelandrew * Richard Herrera @doctyper * Sara Soueidan @SaraSoueidan * Sean Fioritto @sfioritto
Contributing¶
Want to contribute? Follow these recommendations.