Flexbox Holy Albatross
summary
Claims a pure-CSS pattern (the Flexbox Holy Albatross) that flips a flex row to a column based on container space by using calc with 100% vs a constant, leveraging negative/huge flex-basis values so the layout becomes effectively boolean. Demonstrates a JS ResizeObserver fallback, an implementation as a custom elements API, SSR with JSDOM/Eleventy, and quantity-queries for any number of children. Shows it works in practice (even IE11 with the technique) and how gutters and gaps are handled.
AI-written summary · about
chapters (10)
- 0:00THE FLEXBOX HOLY ALBATROSS
- 4:35NO INSPIRATIONAL STORY
- 7:55USE A BREAKPOINT, HEYDON.
- 10:23Container Queries?
- 12:36Pure CSS Container Query?
- 16:52max-width beats width
- 25:24Algorithmic Layout
- 26:29MAKING FUTURE INTERFACES
- 29:02Custom elements
- 35:01THINGS THAT SUCK ASS #2
