Local CSS Flexbox builder

Shape a Flexbox layout and copy exact code

Set the main and cross axes, tune each direct item, inspect the browser-rendered layout, then copy deterministic CSS and HTML.

No network · no saved layouts

Main and cross axes

Flex container

Direction Wrap Justify content Align items Align content Row gap (px) Column gap (px)

DOM-order children

Grow Shrink Basis type Basis value Align self Visual order

Actual browser engine

Reverse directions and order change only the visual layout, not DOM, screen-reader or keyboard order. Verify the real component.