Four Layouts for the Price of One
A single flexbox recipe has caught the community's eye, pulling in over 8,000 likes on Twitter. The snippet, shared by Adam Argyle, uses flex-wrap: wrap alongside flexible input sizing to automatically handle four different layout states without a single media query.
The core CSS is compact: all inputs get flex: 1 1 10ch with a half-rem margin, while the email field is set to flex: 3 1 30ch, making it three times larger. When there isn't enough room, the items simply wrap into a new row.
Argyle also points to the code as a taste of "native" CSS nesting, since it uses an ampersand-based selector inside the form's style block — a syntax that would only work if that feature eventually lands in browsers.
Critics have called the snippet inscrutable, but the logic is straightforward when read aloud:
- Inputs are allowed to grow and shrink equally.
- Uniform margins add breathing room.
- The email input gets three times the flex weight.
- Wrapping is permitted when space runs out.
This is flexbox doing what it does best: offering fluid behavior when you don't need pixel-perfect control. The pattern echoes Tim Van Damme's Adaptive Photo Layout, where photos naturally reflow without strict aspect-ratio enforcement, and a few lines of code can produce an endless set of possible arrangements.
