CSS Flexbox Playground
Visually pick flex-direction, justify-content, align-items, and gap — copy the resulting CSS or Tailwind class.
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.
About this tool
ShowHide
Change flex-direction, justify-content, align-items, flex-wrap and gap on a live row of boxes and read the generated CSS underneath, which is a faster way to learn the model than any diagram. The thing worth internalising is that the two alignment properties do not have fixed directions. justify-content works along the main axis and align-items across it, so in a row the first centres horizontally and in a column it centres vertically — swapping direction swaps which property does which job, and that single fact accounts for most flexbox confusion. Two more defaults explain the rest: align-items starts at stretch, which is why boxes with no height fill the container, and flex-wrap starts at nowrap, so items shrink rather than moving to a new line.
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.
Developer
CSS Filter Playground
Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.
Color & CSS
CSS Animation Generator
Build a CSS animation visually — pick a preset, tweak duration/easing/iteration, see the preview, and copy the generated keyframes.
Developer
CSS clip-path Builder (Circle, Ellipse, Polygon, Inset)
Visual builder for the CSS clip-path property — circle, ellipse, inset or polygon, with sliders, click-to-add points and 10 shape presets.
Color & CSS
Cron Expression Builder
Build a cron expression by clicking — hourly, daily, weekly, monthly, or fully custom — pairs with the Cron Explainer.
Developer
Invisible / Zero-Width Character Detector
Spot NBSPs, zero-width characters, bidi marks, and tabs in pasted text — then clean them out.
Developer