Using DevTools to Understand Modern CSS Layouts
summary
Live DevTools demos show exactly what browsers do: min-content, max-content and fit-content sizing, fr and minmax behavior, and how flex-basis: 0 vs auto produces different proportional growth. The Firefox overlays (notably the Firefox flexbox inspector and grid inspector) reveal content-size numbers — e.g. a box measured 462px, one item shrank by 348px — and prove auto margins center reliably; most demos run live despite a brief restart hiccup.
AI-written summary · about
chapters (10)
- 0:00Start
- 4:47Content-Based Sizing
- 5:28Intrinsic and Extrinsic Sizing
- 7:12Full Width Punctuation
- 7:39Max Content
- 24:57Aligning Flex Icons
- 28:45Baseline
- 29:34Real-World Use Cases for Flex
- 33:30Grid Overlays
- 34:06Flexible Sizing
