DEV3 Technologies home

Developer tool

CSS Flexbox Playground

Experiment with CSS flexbox: direction, wrap, justify, align, gap and per-item grow, shrink, basis and order. See it live and copy CSS, HTML or Tailwind.

Free, no sign-up. Runs in your browser; nothing is uploaded.

Container

Live preview

Click a box to edit it.

Item 1

Code

Format
.flex-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
  gap: 12px;
}

.flex-row > :nth-child(2) {
  flex: 1 1 auto;
}

How to use the css flexbox playground

Learn by changing things

  1. Pick a direction, wrap mode, justify content, align items and gap at the top. The preview boxes move straight away.
  2. Add or remove boxes with Add item and Remove item.
  3. Select a box to set its grow, shrink, basis, order and align self.
  4. Copy the CSS, HTML or Tailwind code when the layout looks right.

The two axes

Flexbox has a main axis and a cross axis. With flex-direction: row the main axis is horizontal, so justify-content moves items left and right and align-items moves them up and down. With column the roles swap. Most flexbox confusion comes from forgetting which direction is active.

The item properties

  • grow decides how leftover space is shared. 0 means do not grow.
  • shrink decides how items give up space when the container is too small.
  • basis is the starting size before growing or shrinking, such as 200px or 30%.
  • order changes visual order without touching the HTML. Keep the reading order sensible for keyboards and screen readers.
  • align-self overrides the container's alignment for a single item.

Common recipes

  • Centre anything: justify-content: center; align-items: center.
  • Push the last item to the end: give it margin-left: auto, or use space-between.
  • Equal-width columns: flex: 1 on every item.
  • Wrapping tag list: flex-wrap: wrap with a gap.

Use gap instead of margins between items. It works in both directions and leaves the outer edges alone.

Frequently asked questions

What is the difference between justify-content and align-items?

justify-content spreads items along the main axis, which is the row direction by default. align-items positions them along the cross axis. When you switch to column direction, the two axes swap.

What does flex: 1 mean?

It is shorthand for grow 1, shrink 1 and basis 0. The item takes an equal share of the free space, so several items with flex: 1 end up the same width.

Why does align-content do nothing?

It only affects containers with more than one line, so it needs flex-wrap set to wrap. The generator omits it for nowrap containers.

When should I choose flexbox over grid?

Flexbox suits one-dimensional layouts, such as a row of buttons or a navigation bar. Grid is better when you control rows and columns at once.

Can I copy the result into Tailwind?

Yes. The tool also prints a Tailwind version with utility classes such as flex-col, justify-between and gap-[12px].