flâneur — a map of the web's best reading

A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

css-tricks.com · 3,769 words · saved by 1 readers

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart. Reference this guide a lot? Here’s a high-res image you can print! The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”). The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow. Most importantly, the flexbox la

CSS Flexbox Table of Contents CSS Flexbox Background CSS Flexbox Properties Interactive Walkthrough CSS Flexbox Demos Flexbox Tricks Flexbox Browser Support Prefixing Flexbox Related Properties More Flexbox Information Get the Poster! Reference the CSS Flexbox guide a lot? Here’s a high-res image you can print! Download Free CSS Flexbox Background The Flexbox Layout (Flexible Box) module provides a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”). The main idea behind th

Explore this link on the map →

related reading