Josh Liljenquist

Private, browser-local utility

CSS Flexbox Generator

Configure a bounded Flexbox layout visually and copy the matching CSS declarations.

The preview uses synthetic items. It does not accept or execute HTML.

Loading local tool…

Supported properties and limits

Container controls cover direction, wrapping, main-axis distribution, cross-axis alignment, multi-line alignment, and a 0–200px gap. The preview contains 1–12 internal text items. One selected item can demonstrate grow, shrink, a 0–1,000px basis, align-self, and order.

Output is plain CSS for .container and one :nth-child() override. This is a focused Flexbox playground, not a page builder, framework generator, or HTML editor.