CSS Flexbox Playground

You need a nav bar with a logo on the left, links centered, and a profile icon on the right. You set justify-content: space-between — but now the centered links aren’t truly centered, they’re just in the remaining space. You try margin: auto on the middle group — better, but the spacing shifts when the logo width changes. You know flexbox can do this, but the interaction between justify-content, flex-grow, and margin: auto is hard to reason about without seeing it.

Why This Playground (Not DevTools or a Cheat Sheet)

DevTools lets you toggle flex properties on an existing element, but you can’t experiment with layouts that don’t exist yet. A flexbox cheat sheet shows you all the values but not how they interact — align-items: stretch behaves differently depending on whether the container has a fixed height. This playground gives you a live container with adjustable items, per-item controls for flex-grow, flex-shrink, flex-basis, align-self, and order, and outputs the CSS as you experiment. Everything runs in your browser; no data is sent anywhere.

What Is CSS Flexbox?

Flexbox (Flexible Box Layout) is a one-dimensional CSS layout model that distributes space along a single axis — either a row or a column. It solves classical alignment and distribution problems that were difficult to achieve with float-based or inline-block-based layouts, and is now supported in every modern browser without vendor prefixes.

A flex layout has two roles: a flex container (the parent) and one or more flex items (the children). The container controls how items are placed and spaced; items can override individual alignment or sizing rules on themselves.

.flex-container {
  display: flex; /* or inline-flex */
}

Container Properties

display

Setting display: flex creates a block-level flex container. display: inline-flex creates an inline-level container — it behaves like an inline-block but its children follow flex rules.

flex-direction

flex-direction defines the main axis — the direction in which flex items are laid out.

.vertical-stack {
  display: flex;
  flex-direction: column;
}

justify-content

Controls alignment of items along the main axis (the axis set by flex-direction).

.centered-row {
  display: flex;
  justify-content: center;
}

align-items

Controls alignment of items along the cross axis (perpendicular to the main axis).

flex-wrap

By default (nowrap), flex items all try to fit on one line. wrap allows items to flow onto multiple lines when they can’t fit.

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

align-content

When flex-wrap is wrap or wrap-reverse, align-content controls how multiple lines are distributed on the cross axis — similar to how justify-content works on the main axis.

gap

The gap property (shorthand for row-gap and column-gap) sets spacing between flex items. It is more reliable than using margin because it applies only between items — not at the edges of the container.

.nav {
  display: flex;
  gap: 24px;
}

Item Properties

Each flex item can override the container’s alignment and sizing rules with its own properties.

flex-grow

A unitless number (default 0) that specifies how much of the remaining free space the item should absorb. If three items have flex-grow values of 1, 2, and 1, they divide free space in a 1:2:1 ratio.

.sidebar   { flex-grow: 1; }
.main-area { flex-grow: 3; }

flex-shrink

A unitless number (default 1) controlling how much the item shrinks when the container is smaller than the total item sizes. Setting flex-shrink: 0 prevents an item from shrinking below its flex-basis.

.logo {
  flex-shrink: 0; /* never compress the logo */
  width: 120px;
}

flex-basis

Sets the initial size of an item before free space is distributed. Accepts auto, 0, absolute lengths (px, em, rem), or percentages.

• flex-basis: auto — use the item’s width or height as the base size
• flex-basis: 0 — ignore the item’s intrinsic size; distribute all space via flex-grow
• flex-basis: 200px — start from 200px, then grow/shrink as needed

The flex shorthand (flex: grow shrink basis) is the recommended way to set all three together:

.equal-thirds {
  flex: 1 1 0; /* each takes equal share of the container */
}

align-self

Overrides align-items for a single item. Accepts the same values as align-items plus auto (inherit from parent).

.special-item {
  align-self: flex-end; /* push only this item to the bottom */
}

order

Integer (default 0) that controls the visual order of items independent of DOM order. Items with lower order values appear first. Useful for responsive layouts where you need to reorder without changing HTML.

.cta-button {
  order: -1; /* push to beginning regardless of DOM position */
}

Common Flexbox Patterns

Sticky footer:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content { flex-grow: 1; }

Centered modal:

.overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Holy Grail layout (header + three columns + footer):

.page   { display: flex; flex-direction: column; }
.main   { display: flex; flex-direction: row; flex: 1; }
.nav    { flex: 0 0 200px; }
.content{ flex: 1; }
.aside  { flex: 0 0 160px; }

Card row with wrapping:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 0 0 280px; /* fixed base, no grow */
}

Flexbox vs Grid

Use flexbox when you have a linear sequence of items to align or distribute. Use CSS Grid when you need precise two-dimensional placement.

Frequently Asked Questions

What is the difference between justify-content and align-items? justify-content aligns items along the main axis (the direction of flex-direction). align-items aligns items along the cross axis (perpendicular). In a row layout, justify-content controls horizontal alignment and align-items controls vertical alignment.

What does flex: 1 mean? flex: 1 is a shorthand for flex: 1 1 0% — the item can grow to fill available space, can shrink if needed, and starts from a base size of 0. This is the most common way to create evenly sized flexible items.

Why won’t my flex items shrink below a certain size? Flex items have an implicit min-width: auto (or min-height: auto in column direction), which prevents them from shrinking below their intrinsic content size. Set min-width: 0 on the item to allow it to shrink further.

Can I use gap in flexbox? Yes. gap works in both flexbox and Grid layouts and is supported in all modern browsers. It is the preferred method for spacing flex items because it does not add margin to the edges of the container.

Does this tool send data to a server? No. All CSS generation and layout preview happens entirely in your browser. Nothing is sent to any server.