Four Layouts for the Price of One

Programming - Mar 31, 2024

Pretty notable when a tweet about a flexbox layouts gets 8K+ likes on Twitter!

That’s “native” CSS nesting in use there as well, assuming we get that at some point and the syntax holds.

There was some feedback that the code is inscrutable. I don’t really think so, to me it says:

  • All these inputs are allowed both to shrink and grow
  • There is even spacing around all of it
  • The email input should be three times bigger than the others
  • If it needs to wrap, fine, wrap.

A great use case for flexbox, which is the right layout mechanism when you aren’t trying to be super precise about the size of everything.

There is a blog post (no byline 🤷‍♂️) with a more longwinded explanation.

This reminds me a lot of Tim Van Damme’s Adaptive Photo Layout where photos lay themselves out with flexbox. They don’t entirely keep their aspect ratios, but they mostly do, thanks to literally the flexibility of flexbox.

Here’s a fun fork of the original.

It’s like a zillion layouts for the price of one, and just a few lines of code to boot.

Previous Next
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More