CSS Flexbox Playground

Experiment with CSS Flexbox properties using an interactive live preview. Copy-ready code for any layout. Free online, no signup.

Preparing private browser tool…

Your file will stay on this device.

Related tools

Color Picker

Pick colors and convert between HEX, RGB, HSL formats instantly. Copy color codes with one click. Free online tool.

File Hash

Generate MD5, SHA-1, SHA-256 checksums from files in your browser. Verify file integrity without uploading. Free and private.

Base64 Encoder

Encode and decode Base64 strings instantly. Supports text and file input. Free online tool, no upload, runs in your browser.

Text Case Converter

Convert text between UPPER, lower, Title, camelCase, snake_case, and more. Free online tool with one-click copy.

Frequently asked questions

justify-content vs align-items?
justify-content aligns on the main axis, align-items aligns on the cross axis. Switching flex-direction swaps which is which.
flex-grow vs flex-basis?
flex-basis sets initial size before free space distribution. flex-grow controls how much extra space the item absorbs.
How to wrap items?
Set flex-wrap: wrap on the container. Use gap for consistent spacing.