Box Alignment
summary
Covers how browsers actually build and align boxes: demonstrates that display: flow-root and other ways to create a block formatting context fix collapsing margins and contain floats, shows that multi-value display is still unimplemented in browsers, uses flexbox tricks (including margin: auto centering for a single child) and grid box‑alignment with the place-content shorthand, rebuilds a bold poster using grid+flex with CSS borders and box‑shadow, and notes only grid gap is visibly animatable today.
AI-written summary · about
chapters (11)
- 0:00Start
- 11:23apply display : inline-block to the green box
- 14:04participate in an inline formatting context
- 16:43align them along the in line axis
- 18:24set the height of a black inline box
- 27:37align along the cross axis
- 28:25tweak positions of individual sex items
- 29:51pack the flex lines
- 32:44justify versus align
- 35:19adjust the alignment of content within the grid
- 41:28animate your stuff across the grid
