Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

Flexbox Grid Exploits

Flexbox — not to be confused with Sex Box, the British TV show wherein Mariella Frostrup interviews people who’ve just had sex in a box — is the CSS layout toolkit de rigueur. Of all the celebrated features of Flexbox, it is the light work it makes of producing wrappable grids, tolerant of dynamic content, that I think's integral.

In this article, I'll cover a few techniques to exploit Flexbox's internal algorithms and design finessed grids intended for changing quantities and dimensions of content.

Basic wrapping

.parent {
	display: flex;
@Heydon
Heydon / SassMeister-input-HTML.html
Created June 1, 2015 17:09
Generated by SassMeister.com.
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<metadata id="metadata7">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>