CSS Flexbox Playground
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.
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
flex gap-[8px]
How to use
- Click each property's chips to set its value.
- Adjust gap and item count for a more representative preview.
- 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
CSS Grid Playground
Visually pick grid-template-columns / rows, gap, and item alignment — copy the CSS straight into your project.
CSS Filter Playground
Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.
CSS Animation Generator
Build a CSS animation visually — pick a preset, tweak duration/easing/iteration, see the preview, and copy the generated keyframes.
CSS clip-path Builder (Circle, Ellipse, Polygon, Inset)
Visual builder for the CSS `clip-path` property — pick a shape (circle, ellipse, inset, or polygon), tweak the numbers with sliders or click the preview to add polygon points, and copy a ready-to-paste CSS declaration. 10 shape presets included (triangle, hexagon, star, arrow, message bubble, plus, …).
Cron Expression Builder
Build a cron expression by clicking — hourly, daily, weekly, monthly, or fully custom — pairs with the Cron Explainer.
Invisible / Zero-Width Character Detector
Spot NBSPs, zero-width characters, bidi marks, and tabs in pasted text — then clean them out.