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: flex for layout. Flex cross-axis defaults to flex-start (children hug), not CSS's stretch, which is a deliberate divergence for ergonomics.
  • Hug means fit-content: a box with no width is clamped to its parent's inner width, so it can't burst out of a narrower parent. An explicit width (or flex-shrink: 0) is your call and will overflow, so clip it with overflow: hidden.
  • display: grid works (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 16px is the same physical size on a 1x and a 2x screen.