awesome-flexbox

Flexbox resource hub

A curated collection of resources and tools for learning and mastering CSS Flexible Box Layout Module

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

GitHub
1k stars
63 watching
122 forks
last commit: about 2 years ago
Linked from 3 awesome lists

awesomecsscss-flexboxcss3flexboxflexbox-gridflexbox-layouthacktoberfesthacktoberfest2022w3c-specification

W3C Specification
CSS Flexible Box Layout Module Level 1

Newsletter
CSS Layout News
CSS Weekly
Responsive Design Weekly
Web Design Weekly

Books
CSS3 Layout Modules 2nd Edition - Rachel Andrew

Guides
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
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
Caniuse
Compass Flexbox
Sass flex mixin 1,122 almost 8 years ago
Stylus flex mixin 11 over 11 years ago
Flexibility 4,326 about 3 years ago
Flexie 1,096 almost 9 years ago
Reflexie 250 over 12 years ago

Other Interesting Articles
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
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

Presentations / Sketching with CSS Flexbox Guide by @sfioritto
Access 20+ Page Guide on Flexbox
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
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
Build with Flexbox
CSS flexbox please
CSS Flexbox snippets for Atom 5 almost 6 years ago
CSS Flexbox snippets for Sublime Text 2/3 13 almost 6 years ago
Fibonacci 442 almost 6 years ago
Flexbox in 5 minutes
Flexbox playground
Flexbox property manipulator
Flexplorer
Flexyboxes
Test CSS Flexbox Rules Live
Try Flexbox

Libraries and Frameworks
Bem grid 134 over 8 years ago
Flexboxgrid 9,382 about 5 years ago
Flex Grid Framework
Flexbox Grid for Stylus
Fuux 9 about 7 years ago Fuux is a Flexbox library that uses the same flexbox interface like classes
Ginger Grid 32 over 2 years ago 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
Cool examples of flexbox layout A codepen a collection
flex-box 2 over 10 years ago A Custom Element to make the basics of flexbox easier to use
Flexbugs 13,634 almost 2 years ago 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 18,274 over 1 year ago FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android
FlexLayout for iOS 2,018 11 months ago FlexLayout brings flexbox to iOS using Swift. Concise, intuitive & chainable syntax
grid-styled 2,039 about 6 years ago Flexbox based responsive ReactJS grid system built with styled-components
iron-flex-layout Style mixins for cross-platform flex-box layouts
Post Apocalypse Flexbox 28 over 9 years ago
React-flexbox 162 almost 8 years ago Implementation of css flexbox in react with inline styles
Reflexbox 1,351 almost 8 years ago Responsive React flexbox grid system higher order component
Solved by flexbox 13,008 almost 3 years ago 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
@afonsopacifer Afonso Pacifer
@brad_frost Brad Frost
@chriscoyier Chris Coyier
@LeaVerou Lea Verou
@zomigi Mickley Gillenwater
@necolas Nicolas
@philwalton Philip Walton
@rachelandrew Rachel Andrew
@doctyper Richard Herrera
@SaraSoueidan Sara Soueidan
@sfioritto Sean Fioritto

Backlinks from these awesome lists:

More related projects: