Flexbox Playground
Preview flex direction, alignment, wrapping, and spacing.
Processing stays in your browser. The preview uses six items. Their real sizes and content determine how a flex layout wraps.
How to use the flexbox playground
Preview flex direction, alignment, wrapping, and spacing. Complete the direction, justify content, align items, wrapping, gap (px) fields above. Choose Run tool, review the output and visual preview where available, then copy or download the result.
Example
Choose row with space-between to distribute items across the available width.
Good to know
The preview uses six items. Their real sizes and content determine how a flex layout wraps.