Files
awesome-awesomeness/html/flexbox.md2.html
2025-07-18 23:13:11 +02:00

361 lines
18 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<p><a href="https://github.com/afonsopacifer/awesome-flexbox/"><img
src="awesome-flexbox.jpg" alt="awesome flexbox" /></a></p>
<p><a href="https://travis-ci.org/afonsopacifer/awesome-flexbox"><img
src="https://travis-ci.org/afonsopacifer/awesome-flexbox.svg?branch=master"
alt="Build Status" /></a> <a
href="https://github.com/sindresorhus/awesome"><img
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
alt="Awesome" /></a></p>
<blockquote>
<p>A curated list of CSS Flexible Box Layout Module or only Flexbox.
Inspired by <a
href="https://github.com/obetomuniz/awesome-webcomponents">awesome-webcomponents</a>
and <a
href="https://github.com/willianjusten/awesome-svg">awesome-svg</a>.</p>
</blockquote>
<h2 id="table-of-contents">Table of Contents</h2>
<ul>
<li><a href="#w3c-specification">W3C Specification</a></li>
<li><a href="#newsletter">Newsletter</a></li>
<li><a href="#books">Books</a></li>
<li><a href="#guides">Guides</a></li>
<li><a href="#cross-browser">Cross Browser</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#support">Support</a></li>
<li><a href="#preprocessors-in-action">Preprocessors in Action</a></li>
<li><a href="#polyfills">Polyfills</a></li>
<li><a href="#other-interesting-articles">Other Interesting
Articles</a></li>
<li><a href="#presentations">Presentations</a></li>
<li><a href="#videos">Videos</a></li>
<li><a href="#slides-and-notes">Slides and Notes</a></li>
<li><a href="#tools">Tools</a></li>
<li><a href="#libraries-and-frameworks">Libraries and
Frameworks</a></li>
<li><a href="#featured-projects">Featured Projects</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#who-to-follow">Who to Follow</a></li>
<li><a href="#contributing">Contributing</a></li>
<li><a href="#licence">Licence</a></li>
</ul>
<h2 id="w3c-specification">W3C Specification</h2>
<p><em>The specification describes a CSS box model optimized for user
interface design.</em> * <a
href="http://www.w3.org/TR/css3-flexbox/">CSS Flexible Box Layout Module
Level 1</a></p>
<h2 id="newsletter">Newsletter</h2>
<ul>
<li><a href="http://csslayout.news/">CSS Layout News</a></li>
<li><a href="http://css-weekly.com/">CSS Weekly</a></li>
<li><a href="http://responsivedesignweekly.com/">Responsive Design
Weekly</a></li>
<li><a href="https://web-design-weekly.com/">Web Design Weekly</a></li>
</ul>
<h2 id="books">Books</h2>
<ul>
<li><a href="http://rachelandrew.co.uk/books/css3-layout-modules">CSS3
Layout Modules 2nd Edition - Rachel Andrew</a></li>
</ul>
<h2 id="guides">Guides</h2>
<p><em>Guides for developers or designer start their studies this
wonderful technology.</em> * <a
href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A guide
to flexbox</a>:metal: * <a
href="https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties">A
visual guide to CSS3 flexbox properties</a> * <a
href="http://desenvolvimentoparaweb.com/css/flexbox/">flexbox
(pt-br)</a> * <a href="http://bocoup.com/weblog/dive-into-flexbox/">Dive
into flexbox</a> * <a
href="https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35">How
Flexbox worksexplained with big, colorful, animated gifs</a> * <a
href="https://medium.com/@lucasjs/como-o-flexbox-funciona-explicado-com-gifs-grandes-e-coloridos-26c42a0bcdc">How
Flexbox worksexplained with big, colorful, animated gifs (pt-br)</a>
* <a href="http://pt-br.learnlayout.com/flexbox.html">Learn layout -
flexbox (pt-br)</a> * <a
href="http://learnlayout.com/flexbox.html">Learn layout - flexbox</a> *
<a href="http://tympanus.net/codrops/css_reference/flexbox/">Reference
of flexbox</a> * <a
href="http://blog.teamtreehouse.com/responsive-design-of-the-future-with-flexbox">Responsive
design of the future with flexbox</a> * <a
href="https://www.smashingmagazine.com/author/cosima-mielke/">The
Flexbox Reading List: Techniques and Tools</a> * <a
href="http://edsonjunior.com/um-guia-visual-para-flexbox/">Um guia
visual para Flexbox (pt-br)</a> * <a
href="https://developer.mozilla.org/pt-BR/docs/CSS/Usando_caixas_flexiveis_css">Usando
caixas flexiveis CSS (pt-br)</a> * <a
href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using
CSS flexible boxes</a> * <a
href="https://medium.com/@spaceninja/what-is-flexbox-6aed968555ef">What
IS Flexbox?</a> * <a
href="http://nucliweb.github.io/flexbox/">Desarrollo de aplicaciones web
Flexibles (es-es)</a> * <a href="https://flexbox.webflow.com/">Webflow
Flexbox</a></p>
<h2 id="cross-browser">Cross Browser</h2>
<p><em>Tips and tricks for your projects work anywhere :D</em></p>
<h4 id="articles">Articles</h4>
<ul>
<li><a
href="http://bitsofco.de/6-reasons-to-start-using-flexbox/?utm_campaign=CSS%2BLayout%2BNews&amp;utm_medium=email&amp;utm_source=CSS_Layout_News_31">6
Reasons to Start Using Flexbox</a></li>
<li><a
href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">Advanced
cross-browser flexbox</a></li>
<li><a href="http://www.sitepoint.com/are-we-ready-to-use-flexbox/">Are
we ready to use flexbox?</a></li>
<li><a href="https://paulrobertlloyd.com/2016/03/logical_flexbox">CSS
Flexbox Is Entirely Logical (Almost)</a></li>
<li><a
href="https://css-tricks.com/designing-a-product-page-layout-with-flexbox/">Designing
A Product Page Layout with Flexbox</a></li>
<li><a
href="http://imasters.com.br/front-end/css/normalizando-bugs-no-flexbox-em-diversos-navegadores/?trace=1519021197&amp;source=single">Normalizando
bugs no flexbox em diversos navegadores (pt-br)</a></li>
<li><a
href="http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/">Normalizing
cross-browser Flexbox bugs</a></li>
<li><a href="https://css-tricks.com/using-flexbox/">Using flexbox:
mixing old and new for the best browser support</a></li>
<li><a
href="http://zomigi.com/blog/using-modernizr-with-flexbox/?utm_campaign=CSS%2BLayout%2BNews&amp;utm_medium=email&amp;utm_source=CSS_Layout_News_8">Using
Modernizr with Flexbox</a></li>
</ul>
<h4 id="support">Support</h4>
<ul>
<li><a href="http://caniuse.com/flexbox">Caniuse</a></li>
</ul>
<h4 id="preprocessors-in-action">Preprocessors in action</h4>
<ul>
<li><a
href="http://compass-style.org/reference/compass/css3/flexbox/">Compass
Flexbox</a></li>
<li><a href="https://github.com/mastastealth/sass-flex-mixin">Sass flex
mixin</a></li>
<li><a href="https://github.com/differui/stylus-flex-mixin">Stylus flex
mixin</a></li>
</ul>
<h4 id="polyfills">Polyfills</h4>
<ul>
<li><a
href="https://github.com/10up/flexibility">Flexibility</a>:metal:</li>
<li><a href="https://github.com/doctyper/flexie">Flexie</a></li>
<li><a href="https://github.com/doctyper/reflexie">Reflexie</a></li>
</ul>
<h2 id="other-interesting-articles">Other Interesting Articles</h2>
<p><em>A list of issues related to flexbox.</em> * <a
href="http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox?utm_campaign=CSS%2BLayout%2BNews&amp;utm_medium=email&amp;utm_source=CSS_Layout_News_36">Almost
complete guide to flexbox (without flexbox)</a>:metal: * <a
href="http://www.smashingmagazine.com/2015/03/02/harnessing-flexbox-for-todays-web-apps/">Designing
CSS layouts with flexbox is as easy as pie</a> * <a
href="http://www.smashingmagazine.com/2015/11/flexbox-interfaces-tracks-case-study/?utm_source=html5weekly&amp;utm_medium=email">Flexbox
For Interfaces All The Way: Tracks Case Study</a> * <a
href="https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.i0v3krqo0">Flexboxs
Best-Kept Secret</a> * <a
href="https://24ways.org/2015/grid-flexbox-box-alignment-our-new-system-for-layout/?utm_campaign=CSS%2BLayout%2BNews&amp;utm_medium=email&amp;utm_source=CSS_Layout_News_20">Grid,
Flexbox, Box Alignment: Our New System for Layout</a> * <a
href="https://css-tricks.com/old-flexbox-and-new-flexbox/">Old flexbox
and new flexbox</a> * <a
href="https://chriswrightdesign.com/experiments/using-flexbox-today/">Using
flexbox today</a> * <a
href="https://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/">Laying
Out A Flexible Future For Web Design With Flexbox</a> * <a
href="http://jonibologna.com/flexbox-cheatsheet/">Flexbox
Cheatsheet</a></p>
<h2 id="presentations">Presentations</h2>
<p><em>Tired of reading? See an interactive presentation and learn
flexbox now.</em></p>
<h4 id="videos">Videos</h4>
<ul>
<li><a
href="https://www.youtube.com/watch?v=MjK1MCjqmpU&amp;list=PLnjYA3TxpDpgWE9cXwT5H7wEsG6ql-Q59&amp;index=15">CSS
Layout o ontem, o hoje e o depois (pt-br)</a></li>
<li><a href="https://www.youtube.com/watch?v=G7EIAgfkhmg">CSS FlexBox
Essentials</a></li>
<li><a href="https://www.youtube.com/watch?v=H1lREysgdgc">CSS FlexBox
Practical Examples (Rebuilding Dribbble.com using FlexBox)</a></li>
<li><a
href="https://css-tricks.com/video-screencasts/140-exploring-css-layout-techniques-while-trying-to-get-a-subtitle-to-wrap/">Exploring
CSS Layout Techniques While Trying To Get a Subtitle to Wrap</a></li>
<li><a href="https://www.youtube.com/watch?v=_98SE8WUvLk">Enhancing
Responsiveness With Flexbox</a></li>
<li><a href="https://vimeo.com/131664957">Flexbox - CSS Day</a></li>
<li><a href="https://www.youtube.com/watch?v=F-KCncXMPk0">Guía Completa
de Flexbox desde 0 (ESP)</a></li>
<li><a href="https://www.youtube.com/watch?v=b9ZrOdTFkNk">HTML5.
Desenvolvimento avançado</a></li>
<li><a
href="https://mijingo.com/lessons/guide-to-flexbox/?utm_campaign=CSS%2BLayout%2BNews&amp;utm_medium=email&amp;utm_source=CSS_Layout_News_34">Introduction
to Flexbox</a></li>
<li><a href="https://vimeo.com/96406277">Leveling up with
flexbox</a></li>
<li><a href="http://flexbox.io">What the flexbox?</a> - A simple 20
video course that will help you master</li>
<li><a
href="https://egghead.io/lessons/misc-flexbox-fundamentals">Flexbox
Fundamentals</a></li>
</ul>
<h3 id="sketching-with-css-flexbox-guide-by-sfioritto"><a
href="http://www.sketchingwithcss.com">Sketching with CSS</a> Flexbox
Guide by <a href="https://github.com/sfioritto"><span class="citation"
data-cites="sfioritto">@sfioritto</span></a></h3>
<h4 id="read-materials">Read Materials</h4>
<ul>
<li><a href="http://www.sketchingwithcss.com/flexbox-tutorial/">Access
20+ Page Guide on Flexbox</a></li>
</ul>
<h4 id="video-materials">Video Materials</h4>
<ul>
<li><a
href="http://www.sketchingwithcss.com/flex-container">Flex-Container Pt.
1: Position Items within a flexbox container</a></li>
<li><a
href="http://www.sketchingwithcss.com/flex-container-2/">Flex-Container
Pt. 2: Rows and Columns</a></li>
<li><a href="http://www.sketchingwithcss.com/grow-shrink/">Grow and
Shrink Flex Items</a></li>
<li><a href="http://www.sketchingwithcss.com/flex-layouts/">Implementing
the Sticky Footer and Holy Grail layout</a></li>
</ul>
<h4 id="slides-and-notes">Slides and Notes</h4>
<ul>
<li><a
href="http://zomigi.com/blog/responsive-layouts-css-dev-conf/">Building
responsive layouts presentation</a></li>
<li><a href="https://speakerdeck.com/afonsopacifer/flexbox">CSS Flexbox:
Estruturando layouts sem gambiarras (pr-br)</a></li>
<li><a href="http://zomigi.com/blog/css3-layout/">CSS3 layout</a></li>
<li><a
href="http://zomigi.com/blog/flexbox-presentation/">Flexbox</a></li>
<li><a
href="http://pt.slideshare.net/diegoeis/flexbox-to-the-people">Flexbox
and Grid Layout</a></li>
<li><a href="http://zomigi.com/blog/future-css-layout-fowd/">Future css
layout fowd</a></li>
<li><a href="http://zomigi.com/blog/leveling-up-with-flexbox/">Leveling
up with flexbox</a></li>
<li><a href="http://zomigi.com/blog/rwd-flexbox/">RWD flexbox</a></li>
<li><a
href="https://speakerdeck.com/diogomoretti/css-layout-from-table-to-flexbox">CSS
Layout: from Table to Flexbox</a></li>
</ul>
<h2 id="tools">Tools</h2>
<p><em>Have a little help to create their projects :D</em> * <a
href="http://flexbox.buildwithreact.com/">Build with Flexbox</a> * <a
href="http://demo.agektmr.com/flexbox/">CSS flexbox please</a> * <a
href="https://github.com/brenopolanski/css-flexbox-atom-snippets">CSS
Flexbox snippets for Atom</a> * <a
href="https://github.com/brenopolanski/css-flexbox-sublime-snippets">CSS
Flexbox snippets for Sublime Text 2/3</a> * <a
href="https://github.com/maxsteenbergen/Fibonacci">Fibonacci</a> * <a
href="https://cvan.io/flexboxin5/">Flexbox in 5 minutes</a> * <a
href="https://web.archive.org/web/20151207135410/http://flexiejs.com/playground/">Flexbox
playground</a> * <a
href="http://codepen.io/enxaneta/full/adLPwv/">Flexbox property
manipulator</a> * <a
href="http://bennettfeely.com/flexplorer/">Flexplorer</a> * <a
href="http://the-echoplex.net/flexyboxes/">Flexyboxes</a> * <a
href="http://flexbox.help/">Test CSS Flexbox Rules Live</a> * <a
href="https://zyxneo.github.io/flexbox/try-flexbox">Try Flexbox</a></p>
<h2 id="libraries-and-frameworks">Libraries and Frameworks</h2>
<p><em>A list of incredible libraries based on flexbox.</em> * <a
href="https://github.com/bem-incubator/bem-grid">Bem grid</a> * <a
href="https://github.com/kristoferjoseph/flexboxgrid">Flexboxgrid</a>:metal:
* <a href="https://afonsopacifer.github.io/flex-grid-framework/">Flex
Grid Framework</a>:metal: * <a href="http://stylusgrid.com">Flexbox Grid
for Stylus</a> * <a
href="https://github.com/henriquecustodia/fuux">Fuux</a> - Fuux is a
Flexbox library that uses the same flexbox interface like classes. * <a
href="https://github.com/erwstout/ginger/">Ginger Grid</a> - A Flexbox
grid framework named after a cute dog. * <a
href="http://bulma.io/">Bulma</a> - A modern CSS framework based on
Flexbox * <a href="http://milligram.github.io/">Milligram</a> - A
minimalist CSS framework * <a
href="http://kaisermann.github.io/rolleiflex/">RolleiFLEX</a> - Just a
responsive flexbox grid * <a
href="https://lucasgruwez.github.io/waffle-grid">Waffle Grid</a> - An
easy to use flexbox grid system</p>
<h2 id="featured-projects">Featured Projects</h2>
<p><em>Awesome projects about flexbox.</em> * <a
href="http://codepen.io/collection/KegmA/">Cool examples of flexbox
layout</a> - A codepen a collection. * <a
href="https://github.com/potch/flex-box">flex-box</a> - A Custom Element
to make the basics of flexbox easier to use. * <a
href="https://github.com/philipwalton/flexbugs">Flexbugs</a> - A
community-curated list of flexbox issues and cross-browser workarounds
for them. * <a href="http://flexboxfroggy.com/">Flexbox Froggy</a> - A
game for learning CSS flexbox. * <a
href="http://www.flexboxpatterns.com/">Flexbox Patterns</a> - Examples
and source code that will teach you how to build UI components with CSS
flexbox! Whats flexbox? * <a
href="http://www.flexboxdefense.com/">Flexbox Defense</a> - Tower
Defense with a twist: all towers must be positioned with CSS Flexbox. *
<a href="http://madebymike.com.au/demos/flexbox-tester/">Flexbox
tester</a> - Understand how to calculate the width of flex items. * <a
href="https://github.com/google/flexbox-layout">Flexbox layout</a> -
FlexboxLayout is a library project which brings the similar capabilities
of CSS Flexible Box Layout Module to Android. * <a
href="https://github.com/lucdion/FlexLayout">FlexLayout for iOS</a> -
FlexLayout brings flexbox to iOS using Swift. Concise, intuitive &amp;
chainable syntax. * <a
href="https://github.com/jxnblk/grid-styled">grid-styled</a> - Flexbox
based responsive ReactJS grid system built with styled-components * <a
href="https://www.webcomponents.org/element/PolymerElements/iron-flex-layout">iron-flex-layout</a>
- Style mixins for cross-platform flex-box layouts * <a
href="https://github.com/afonsopacifer/post-apocalypse-flexbox">Post
Apocalypse Flexbox</a> * <a
href="https://github.com/tcoopman/react-flexbox">React-flexbox</a> -
Implementation of css flexbox in react with inline styles. * <a
href="https://github.com/jxnblk/reflexbox">Reflexbox</a> - Responsive
React flexbox grid system higher order component. * <a
href="https://github.com/philipwalton/solved-by-flexbox">Solved by
flexbox</a> - A showcase of problems once hard or impossible to solve
with CSS alone, now made trivially easy with Flexbox.:metal: * <a
href="http://codepen.io/paultrone/pen/xwxNmQ?utm_campaign=CSS%2BLayout%2BNews&amp;utm_medium=email&amp;utm_source=CSS_Layout_News_6">Visualizing
Flexbox</a> - A neat little CodePen Demo to play around with Flex
properties. * <a href="https://css-flexbox.zeef.com/afonso.pacifer">ZEEF
CSS Flexbox</a> - The awesome flexbox on zeef.:metal: * <a
href="http://flexboxzombies.com/p/flexbox-zombies">Flexbox Zombies</a> -
A game for learning CSS flexbox.</p>
<h2 id="courses">Courses</h2>
<ul>
<li><a
href="https://teamtreehouse.com/library/css-flexbox-layout?utm_source=Responsive+Design+Weekly&amp;utm_campaign=e4dbc18ebc-Responsive_Design_Weekly_184&amp;utm_medium=email&amp;utm_term=0_df65b6d7c8-e4dbc18ebc-59080665&amp;goal=0_df65b6d7c8-e4dbc18ebc-59080665">CSS
Flexbox Layout</a> - treehouse</li>
<li><a href="https://scrimba.com/g/gflexbox">Learn Flexbox for free</a>
- scrimba</li>
</ul>
<h2 id="who-to-follow">Who to Follow</h2>
<p><em>People who talk about it.</em> * Afonso Pacifer <a
href="https://twitter.com/afonsopacifer"><span class="citation"
data-cites="afonsopacifer">@afonsopacifer</span></a> * Brad Frost <a
href="https://twitter.com/brad_frost"><span class="citation"
data-cites="brad_frost">@brad_frost</span></a> * Chris Coyier <a
href="https://twitter.com/chriscoyier"><span class="citation"
data-cites="chriscoyier">@chriscoyier</span></a> * Lea Verou <a
href="https://twitter.com/leaverou"><span class="citation"
data-cites="LeaVerou">@LeaVerou</span></a> * Mickley Gillenwater <a
href="https://twitter.com/zomigi"><span class="citation"
data-cites="zomigi">@zomigi</span></a> * Nicolas <a
href="https://twitter.com/necolas"><span class="citation"
data-cites="necolas">@necolas</span></a> * Philip Walton <a
href="https://twitter.com/philwalton"><span class="citation"
data-cites="philwalton">@philwalton</span></a> * Rachel Andrew <a
href="https://twitter.com/rachelandrew"><span class="citation"
data-cites="rachelandrew">@rachelandrew</span></a> * Richard Herrera <a
href="https://twitter.com/doctyper"><span class="citation"
data-cites="doctyper">@doctyper</span></a> * Sara Soueidan <a
href="https://twitter.com/SaraSoueidan"><span class="citation"
data-cites="SaraSoueidan">@SaraSoueidan</span></a> * Sean Fioritto <a
href="https://twitter.com/sfioritto"><span class="citation"
data-cites="sfioritto">@sfioritto</span></a></p>
<h2 id="contributing">Contributing</h2>
<p>Want to contribute? <a
href="https://github.com/afonsopacifer/awesome-flexbox/blob/master/contributing.md">Follow
these recommendations</a>.</p>
<h2 id="license">License</h2>
<p><a
href="https://github.com/afonsopacifer/awesome-flexbox/blob/master/license.md">MIT
License</a> © <a href="https://afonsopacifer.github.io/">Afonso
Pacifer</a></p>
<p><a href="https://github.com/afonsopacifer/awesome-flexbox">flexbox.md
Github</a></p>