Layout
Everything defaults to block; use display: flex. Hug, fill, and why inline flow is gone.
DIVERGENCE from docs 01–04. The inline/block-by-role model was built and then deliberately removed. taffy has no inline text-flow, so inline elements hugged inside flex parents but filled inside block ones (full-width buttons), confusing. It's gone.
- Everything defaults to
display: block. Block containers make children fill. - Use
display: flexfor layout. Flex cross-axis defaults to flex-start (children hug), not CSS'sstretch, which is a deliberate divergence for ergonomics. - Hug means
fit-content: a box with nowidthis clamped to its parent's inner width, so it can't burst out of a narrower parent. An explicitwidth(orflex-shrink: 0) is your call and will overflow, so clip it withoverflow: hidden. display: gridworks (grid-template-columns/-rows:1fr,px,auto).- No inline text flow: two
<text>siblings stack, they don't share a line. - Lengths are logical pixels. Layout and taps run in logical space and the
scene is scaled to the display's DPI, so
16pxis the same physical size on a 1x and a 2x screen.