Open menu

CSS Flexbox Playground

Experiment with every flexbox property and see the result instantly. Set the container's direction, wrapping, justify-content, align-items, align-content and gap, then select individual items to change flex-grow, flex-shrink, flex-basis, order and align-self. Start from 20 common patterns, such as navbars, media objects, sidebars, equal columns, sticky footers and tag lists, and export minimal CSS or real Tailwind utility classes.

Preset gallery
1
2
3

Accessibility checks

  • Pass Visual order matches the HTML order.
  • Pass gap spaces items without margins on the first or last item.

Export code

.flex {
  display: flex;
  gap: 12px;
}
Favourites on this device (0)

No favourites yet.

Container
flex-wrap
Items

How to use the flexbox playground

  1. Pick a pattern or start with three items in a row.
  2. Set the container: direction, wrapping, how items are distributed along the main axis (justify-content) and aligned on the cross axis (align-items), plus the gap.
  3. Select an item and change how it grows, shrinks, its starting size (flex-basis), its order and its own alignment.
  4. Add or remove items to see how wrapping and distribution behave.
  5. Export CSS (only non-default values are written), Tailwind utilities, HTML, SCSS or React.

How flexbox works: the two axes

Flexbox works along a main axis, set by flex-direction, and a cross axis perpendicular to it. justify-content distributes items on the main axis; align-items aligns them on the cross axis. When you switch to column, the two swap, which is the most common source of flexbox confusion.

Worked examples

Example 1: a navigation bar

Load Navbar: the logo, links and an action button, with the middle item growing to push the button to the right edge. align-items: center lines everything up vertically.

Example 2: a media object

Load Media object: a fixed-size image (flex-shrink: 0, basis 96px) beside text that takes the remaining space. It’s the classic comment or notification layout.

Example 3: a responsive tag list

Load Tags: items wrap onto new lines with an 8px gap. Use it for keyword chips, filter buttons and badges.

Tailwind output

The Tailwind export uses standard utilities where they exist (flex, justify-between, items-center, gap-4, flex-1, shrink-0), and arbitrary values only where needed, such as basis-[220px].

Common mistakes

  • Expecting items to shrink below their content. Text and images have a minimum content size; add min-width: 0 to let a flex item shrink further.
  • Using flex: 1 when you meant equal widths with different content. flex: 1 (basis 0%) gives equal widths; flex: auto (basis auto) shares only the leftover space.
  • Too many items without wrapping. Turn on flex-wrap: wrap so rows can break on small screens.

Flexbox or grid?

Use flexbox for one row or column of items, and grid when you need rows and columns to line up together.

Frequently asked questions

When should I use flexbox instead of grid?

Flexbox lays items out in one direction (a row or a column) and lets content decide sizes: ideal for navbars, toolbars, button groups and media objects. Grid controls rows and columns together: better for whole page layouts and card grids.

What does flex: 1 actually mean?

It's shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Every item with flex: 1 starts from zero width and shares the space equally, which is how you get equal columns.

Why use gap instead of margins?

gap adds space only between items, never before the first or after the last, and it works the same when items wrap. With margins you need extra rules to remove the outer spacing.

Is it OK to reorder items with order or row-reverse?

It changes only what you see. Keyboard focus and screen readers follow the HTML order, so a visual order that differs a lot can confuse people. The checker warns when the order is changed.

Why won't my flex item shrink below its content?

Flex items have min-width: auto by default, so long words or wide children stop them shrinking. Set min-width: 0 (or overflow: hidden) on the item to allow it.

Sources