Using DevTools To Understand Modern CSS Layouts – Chen Hui Jing at
summary
Live DevTools demos use Firefox’s Flexbox and Grid inspectors to show exact calculations: flex-basis auto vs 0 changes free‑space distribution, fr columns absorb and lose space first, and fit-content caps at its max-content limit. The talk walks through min-content/max-content/fit-content/minmax behavior, shows margin:auto centering and nav tricks, and reproduces surprising pixel splits and subpixel rounding so viewers see the algorithms and that the layouts actually work.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 0:38Who am I
- 1:45What are modern CSS layouts
- 3:17Contentbased sizing
- 6:45Fit content
- 8:30Flexbox
- 12:22Flex shrink
- 15:30Available free space
- 17:31Box alignment properties
- 21:43Common use cases
- 23:57Flexible sizing
- 26:27Fr vs Otto
- 27:45Fit vs Min
- 28:57Auto vs Fit
- 30:49Variable Sizing
related talks
42mUsing DevTools to Understand Modern CSS Layouts
43mDevTools, the CSS Advocate in Your Browser
43mDevTools, the CSS advocate in your browse
36mDevTools, more than just a debugger
50mPresent and Future of CSS Layout
45mRefactoring the way we talk about CSS
04h 48mIntermediate To Advanced CSS For Practical Peoples
51mCreative CSS Layout