Flex-grow 9999 Hack
This is an unintuitive—but very handy—use of of the flex-grow property. The use-case outlined here is fairly common.
The Flexbox Holy Albatross | HeydonWorks
Er …I think Heydon might’ve cracked it. And by “it”, I mean container queries.
This is some seriously clever thinking involving CSS custom properties, calc, and flexbox. The end result is a component that can respond to its container …and nary a media query in sight!
Related links
Horizontal lines around centered content
Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.
Intro to Flexbox
The slides from Arelia’s flexbox talk.
Flexbox Patterns
Here’s a well put-together collection of common patterns that are now much easier thanks to flexbox.
CSS Flexbox Is Entirely Logical (Almost) / Paul Robert Lloyd
Paul is digging deep into flexbox and finding it particularly useful for internationalisation …but there are still some gotchas.
Related posts
content-visibility in Safari
Safari 18 supports `content-visibility: auto` …but there’s a very niche little bug in the implementation.
Speedier tunes
Improving performance with containment.
Declarative design
Defining the inputs instead of trying to control the outputs.
New tools for art direction on the web
Variable fonts + CSS grid + service workers
Good griddance
How CSS grid is making my life easier.