The Holy Albatross

Reducing our reliance on media queries

What?

This is cool technique to flip all horizontal columns to switch straight to vertical without using media queries. It's based on the vid by Kevin Powell, which is based on an article by Heydon Pickering.

The Code

First the flex container needs flex wrap turned on: flex-wrap: wrap;

It uses a special calc formula in the flex-basis of each flex item along with a flex-grow value of 1 (to allow growth).

flex-basis: calc((35em - 100%) * 999); flex-grow: 1;

How?

A flex-basis value that is negative (eg. 1) will cause the flex items to stack vertically.

The 100% is the width of the container. When that width is less than 35em you get a positve number. Because flexbox is flexible and not that precise the 999 multiplier forces the flex items to switch from an all horizontal to all vertcial (stacked) layout without the transition where you would have two boxes on one row and one stretched box on the next.