Box Alignment
summary
Explains how the CSS box model and display:flow-root actually stop collapsing margins and contain floats, shows using margin:auto centering inside flex for one-line centering, demonstrates flex main/cross axis alignment and place-content/place-items shorthands, warns multi-value display syntax lacks broad support, and reproduces a striking Lazlo Molinero poster with CSS grid plus nested flex containers (gear and arrow built in pure CSS) confirming the approach works in current browsers.
AI-written summary · about
chapters (11)
- 0:00Start
- 7:52What is a formatting context?
- 9:22Inner display type
- 11:10Block formatting context
- 16:40Inline box construction
- 24:48Flex directions
- 30:04Allgning along the cross axis
- 32:20Packing flex lines
- 33:58Grid terminology
- 34:27Box alignment properties
- 40:39Overflow alignment keywords
