Heydon Pickering avatar Heydon Pickering

The Flexbox Holy Albatross Reincarnated

Screenshot of “The Flexbox Holy Albatross Reincarnated”

when you have three items, you’ll be happy with the three-abreast layout and accepting of the single-column configuration. But you might like to avoid the intermediary part where you get a pair of elements on one line followed by a longer element underneath.

A great responsive layout trick, without any Media Query, so also usable inside a component of any width, awesome!

As mentioned in Heydon's post, Rémi Parmentier already wrote 3 years ago about his Fab Four technique to create Responsive Emails without Media Queries, but I like how Heydon uses custom properties to make it easier (Yes, Remi could obviously not have used them back then.)

We still do need container/element queries, anyway, for other responsiveness needs!