AZ Tools

CSS Flexbox Playground

Developer

Adjust every common flex property by clicking instead of typing. The preview updates instantly so the meaning of each value is obvious, and the output box gives you both the raw CSS rule and the equivalent Tailwind utility classes. Great for learning the model, debugging a layout, or copy-pasting the right combo into a project.

—
flex-direction
flex-wrap
justify-content
align-items
Preview
1
2
3
4
5
CSS
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
Tailwind
flex gap-[8px]

How to use

  1. Click each property's chips to set its value.
  2. Adjust gap and item count for a more representative preview.
  3. Copy the CSS rule or the Tailwind class for your project.

Frequently asked questions

What's the difference between justify-content and align-items?
justify-content controls alignment along the main axis (the direction the flex container flows), align-items controls the cross axis. Switch the direction to column and you'll see them swap visually.
Why does align-items stretch make items fill the container?
Stretch is the default. It tells items without an explicit size on the cross axis to fill the available space. Pick a different align value to see items shrink to their content.
When does flex-wrap matter?
When items can't fit on a single line. With wrap, items go to the next line; with nowrap (the default) they shrink to fit, sometimes overflowing.
Why is the Tailwind class an arbitrary value?
Most flex properties have a dedicated Tailwind class (flex, justify-center, items-center, gap-2). Gaps with custom values (8px, 12px) use arbitrary values like gap-[8px].

Related tools

JWT Decoder

Decode a JSON Web Token to inspect its header, claims, and expiration.

Developer00

UUID Generator

Generate random version-4 UUIDs in bulk, with copy.

Developer00

Hash Generator (SHA)

Generate SHA-1, SHA-256, SHA-384, and SHA-512 hashes from text.

Developer00

URL Encoder / Decoder

Percent-encode text for URLs, or decode encoded URLs back to text.

Developer00

Base64 Encoder / Decoder

Encode text to Base64 or decode Base64 back to text, instantly.

Developer00

JSON Formatter & Validator

Format, beautify, minify, and validate JSON right in your browser.

Developer00