afonsopacifer / Awesome Flexbox
Licence: mit
👓 A curated list of CSS Flexible Box Layout Module or only Flexbox.
Stars: ✭ 1,034
Projects that are alternatives of or similar to Awesome Flexbox
Flexy
Flexy is minimal CSS framework made with Flex
Stars: ✭ 114 (-88.97%)
Mutual labels: flexbox-grid, css3, flexbox
Katana
Katana is CSS Layout System made with Flexbox
Stars: ✭ 57 (-94.49%)
Mutual labels: css3, flexbox, flexbox-grid
40-lines-of-Sass
Full featured flexbox grid in 40 lines of Sass
Stars: ✭ 20 (-98.07%)
Mutual labels: flexbox, flexbox-grid
tailwind-bootstrap-grid
Tailwind CSS plugin that generates Bootstrap's flexbox grid
Stars: ✭ 96 (-90.72%)
Mutual labels: flexbox, flexbox-grid
Atgrid.css
CSS Grid System with attribute selectors
Stars: ✭ 37 (-96.42%)
Mutual labels: flexbox-grid, flexbox
hangman-game
A responsive hangman game built with vanilla javascript, html, and css. Animated with GSAP and canvas animations.
Stars: ✭ 22 (-97.87%)
Mutual labels: css3, flexbox
boardz
Create Pinterest-like boards with pure CSS, in less than 1kB.
Stars: ✭ 33 (-96.81%)
Mutual labels: css3, flexbox
bootstrap4-boilerplate
A Bootstrap v4.4.1 boiler plate with sass, concatenation, minification, autoprefixer, Browsersync, hot reloading and sourcemaps all runned by Gulp
Stars: ✭ 19 (-98.16%)
Mutual labels: css3, flexbox
Kindling
A pocket-sized grid system built on the flex display property.
Stars: ✭ 155 (-85.01%)
Mutual labels: flexbox-grid, flexbox
Vue Flexboxgrid
Vue components made with Flexboxgrid
Stars: ✭ 37 (-96.42%)
Mutual labels: flexbox-grid, flexbox
zeus
A novel mobile first flexbox BEM css grid.
Stars: ✭ 14 (-98.65%)
Mutual labels: flexbox, flexbox-grid
Pintsize
Customisable 💪 Flexbox grid system
Stars: ✭ 330 (-68.09%)
Mutual labels: flexbox-grid, flexbox
vanilla-js
Projects using pure JavaScript without any external libraries or frameworks
Stars: ✭ 129 (-87.52%)
Mutual labels: css3, flexbox
flexbox-carousel
CSS3 Animated Carousel with Flexbox
Stars: ✭ 23 (-97.78%)
Mutual labels: css3, flexbox
tetris-grid
◼️Lightweight and simple CSS grid
Stars: ✭ 16 (-98.45%)
Mutual labels: flexbox, flexbox-grid
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (-85.11%)
Mutual labels: flexbox-grid, flexbox
flexbin
Pure CSS, flexible and gapless image gallery layout like Google Images and 500px.com
Stars: ✭ 93 (-91.01%)
Mutual labels: css3, flexbox
A curated list of CSS Flexible Box Layout Module or only Flexbox. Inspired by awesome-webcomponents and awesome-svg.
Table of Contents
- W3C Specification
- Newsletter
- Books
- Guides
- Cross Browser
- Articles
- Support
- Preprocessors in Action
- Polyfills
- Other Interesting Articles
- Presentations
- Videos
- Slides and Notes
- Tools
- Libraries and Frameworks
- Featured Projects
- Courses
- Who to Follow
- Contributing
- Licence
W3C Specification
The specification describes a CSS box model optimized for user interface design.
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 2/3
- 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.
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].