CSS flexbox builder
Test item basis, growth, wrapping and alignment; export HTML/CSS.
- Runs in your browser
- No upload
- Check before download
Inputs stay in this tab and are not uploaded or saved automatically. Optional aggregate usage counts and coarse processing diagnostics are sent only after consent, without input content or filenames. Clearing or closing loses inputs; save needed outputs first.
Resource limits
1–24 items; basis 0–2000px, grow/shrink 0–20, order ±24, gap 0–100px. Preview uses available width. Visual order does not change DOM, reading or keyboard order. Local bounded preview, not a universal browser/layout guarantee. Inputs are never executed. Download HTML and CSS together. Watchdog: 8 seconds.
How to use
- Configure the example
Choose direction, wrap and alignment, then edit item basis, grow, shrink and order. Generate and compare the positions at the available width. Export HTML and CSS together.
- Inspect before using
Inputs stay in this tab and are not uploaded or saved automatically. Optional aggregate usage counts and coarse processing diagnostics are sent only after consent, without input content or filenames. Clearing or closing loses inputs; save needed outputs first. 1–24 items; basis 0–2000px, grow/shrink 0–20, order ±24, gap 0–100px. Preview uses available width. Visual order does not change DOM, reading or keyboard order. Local bounded preview, not a universal browser/layout guarantee. Inputs are never executed. Download HTML and CSS together. Watchdog: 8 seconds.
- Export the checked result
Download result; Download original
Questions and limits
Resource limits
1–24 items; basis 0–2000px, grow/shrink 0–20, order ±24, gap 0–100px. Preview uses available width. Visual order does not change DOM, reading or keyboard order. Local bounded preview, not a universal browser/layout guarantee. Inputs are never executed. Download HTML and CSS together. Watchdog: 8 seconds.
Offline design
Inputs stay in this tab and are not uploaded or saved automatically. Optional aggregate usage counts and coarse processing diagnostics are sent only after consent, without input content or filenames. Clearing or closing loses inputs; save needed outputs first.
Inspect before using
Choose direction, wrap and alignment, then edit item basis, grow, shrink and order. Generate and compare the positions at the available width. Export HTML and CSS together.