Skip to main content
lab.golamrabbani.org

CSS Flexbox Playground

Interactive flexbox playground with live preview and copyable CSS.

Written by Golam Rabbani, Founder & Lead Engineer

Live preview

item 1
item 2
item 3
item 4

Generated CSS

.flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 1rem;
}

How to use this css flexbox playground

  1. Pick a flex-direction (row, row-reverse, column, column-reverse) for the main axis.
  2. Choose justify-content to control spacing along the main axis and align-items for the cross axis.
  3. Toggle flex-wrap and set a gap value (e.g. 1rem, 16px).
  4. Change the item count to see how children of different counts fit your layout.
  5. Click Copy CSS to grab the generated rule and paste it into your stylesheet.

About this css flexbox playground

The CSS Flexbox playground is an interactive sandbox for the five flex container properties you reach for daily: flex-direction, justify-content, align-items, flex-wrap, and gap. Each control updates a live preview pane and the copyable CSS rule simultaneously, so you can see exactly how each property changes the layout and learn flexbox by direct experimentation.

Flexbox is a 1-D layout model: items flow along a single main axis (set by flex-direction), with the cross axis perpendicular to it. justify-content controls main-axis distribution; align-items controls cross-axis alignment. flex-wrap lets items break onto a new line when they overflow, and gap adds consistent spacing between items without margin hacks. The playground exposes the values you would actually type into your CSS — so the mental model you build here transfers one-to-one to your code.

For example, setting flex-direction to "row", justify-content to "space-between", align-items to "center", flex-wrap to "nowrap", and gap to "1rem" produces a horizontal row of items pushed to the edges with consistent vertical centering — perfect for a header layout. The exact CSS appears in the result panel, ready to copy.

FAQ

When should I use Flexbox vs CSS Grid?
Flexbox is best for one-dimensional layouts — a single row or column where you want to distribute items along one axis. Grid is best for two-dimensional layouts where you need to align items in both rows and columns at the same time.
What does each property do?
flex-direction sets the main axis. justify-content distributes items along that axis. align-items aligns them perpendicular to it. flex-wrap controls whether items break onto new lines, and gap adds spacing between items.
Why does align-items: stretch make my items grow?
stretch is the default. It tells items to fill the cross-axis size of the container. If you want items to keep their natural height, change align-items to flex-start, center, or flex-end.
What is the difference between justify-content and align-items?
justify-content works along the main axis (the one set by flex-direction). align-items works along the cross axis (the perpendicular one). Swap flex-direction from row to column and the two properties effectively swap which axis they control.
Is gap supported everywhere?
Yes — gap in flex containers is supported in every modern browser since 2021. If you need to support very old browsers, fall back to margin on items, but for evergreen browsers gap is the cleaner choice.
Does the playground save my settings?
No — it is stateless by design. Copy the generated CSS into a file in your project; that is the right place to persist your layout decisions.