Heydon Pickering Heydon

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;

Unusual Shapes

Ask any of my friends, and they'll tell you I'm a big fan of shapes. Here are some of my all time favorites:

The circle
The hexagon
The triangle
The 'play button' (a triangle on its side)
The square
The fast square (a skewed square)

Algorithmic layouts

You are looking at the most important, and most abundant thing on the web. You can't see it, unfortunately, because it's very small… aaaaand it's invisible — so having a magnifying glass doesn't really help here. But still.

I'm talking, of course, about U+0020; not to be confused with the band U2, who are just as ubiquitous, but far less useful.

This unicode point, representing the humble space character, is between every word, in every run of text, on every page of the web. And it has a very special characteristic: it's not sticky like glue. If two words are neighbors but there's not enough room for both of them, the space will free the second word to wrap around and start a new line.

Before getting into flexible containers, viewport meta tags, and @media breakpoints this humble character is what makes the web fundamentally 'responsive'. That is: able to change the layout of its content to suit different devices, contexts, and settings. Browser text does this automa

	<!-- 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>

	Handlebars.registerHelper('slugify', function(title) {
	return title.toLowerCase()
	.replace(/ /g,'-')
	.replace(/[^\w-]+/g,'');
	});

	(function () {
	// If the browser supports Microsoft High Contrast Mode...
	if (window.matchMedia('(-ms-high-contrast: none), (-ms-high-contrast: active)').matches) {
	// Get all the SVGs on the page except the symbol defs
	var svgs = document.querySelectorAll('svg:not(.defs)')

	// ... iterate over SVGs
	Array.prototype.forEach.call(svgs, function(svg) {
	// Set preserveAspectRatio to 'XMidYMin slice'
	svg.setAttribute('preserveAspectRatio', 'xMidYMin slice')

	// Elements with `data-observe` toggle `data-visible`
	// between `true` and `false`

	if ('IntersectionObserver' in window) {
	const callback = (entries, observer) => {
	entries.forEach(entry => {
	entry.target.setAttribute('data-visible', entry.isIntersecting)
	})
	}

	function isLight(hex) {
	let vals = hex.substring(1).split('').map((h, i) => {
	if (!/^\d+$/.test(h)) {
	h = parseInt(h, 16)
	}
	return parseInt(i % 2 < 1 ? h * 16 : h)
	})
	return vals.reduce((n, x) => n + x) > (765 / 2)
	}

	function Mutilator(data, name, context) {
	this.n = name \|\| `mutilation-${+new Date()}`;
	this.d = data;
	this.c = context \|\| window;
	this.isArr = function(p) {
	return this.d[p].constructor == Array;
	};
	this.dispatch = function(p, v, t) {
	this.c.dispatchEvent(
	new CustomEvent(this.n, {

	/* This special class is used to remove content visually,
	without removing it from screen reader output. Use it in
	place of `display: none` when you want screen readers to
	identify and announce the information the (visually) hidden
	element contains */

	.vh {
	clip-path: inset(100%) !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	height: 1px !important;