UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Flexbox Playground

Tune flex-direction, alignment, gap, and item counts while copying container CSS.

About Flexbox Playground

Flexbox is the go-to layout system for aligning items along a single axis, but the interaction between flex-direction, justify-content, align-items, and flex-grow is notoriously confusing until you see it visually. The Flexbox Playground gives you a live container with adjustable child items and controls for every flex property on both the container and individual items. Toggle direction, spacing, wrapping, and alignment and watch items rearrange in real time. Add or remove children, give each its own flex-grow and flex-basis, and observe how the algorithm distributes space. The output copies the full container CSS plus any per-item overrides, making it equally useful for learning and for generating production-ready layout code.

Why use Flexbox Playground

Every Property

All flex container properties — flex-direction, flex-wrap, justify-content, align-items, align-content, and gap — are exposed with named value buttons. No memorizing keyword lists; all valid values for each property appear as clickable options that apply instantly.

Live Items

Add up to eight flex items to the container and watch them redistribute as you change container properties. Remove items to see how remaining space is reallocated. The item count slider makes it immediately clear how flex-grow and flex-wrap interact at different child counts.

Item-Level Tweaks

Click any individual flex item to open per-item controls for flex-grow, flex-shrink, and flex-basis. This lets you test mixed strategies — one item that grows to fill space, others that stay fixed — and see exactly how the flex algorithm resolves the available space.

Learning Mode

Hover tooltips on each property and value explain the CSS behavior in plain language before you apply it. The playground doubles as an interactive reference, letting you experiment with unfamiliar values and read a brief explanation without leaving the tool.

Copy Full Rule

Export includes the container display: flex declaration plus all non-default property values. Properties that match the flexbox default are omitted from the output so you get the minimum necessary CSS rather than a verbose listing of every property.

Reset Button

One click returns all container and item properties to CSS flexbox defaults, clearing any accumulated configuration and letting you start fresh. Useful when you have been experimenting and want a clean baseline without reloading the page.

How to use Flexbox Playground

  1. Set flex-direction to row or column to establish the main axis orientation
  2. Choose a justify-content value to control spacing along the main axis
  3. Set align-items to position children on the cross axis
  4. Toggle flex-wrap and set the gap between items
  5. Click individual items to set per-item flex-grow, flex-shrink, and flex-basis
  6. Click Copy CSS to export the container rule and any active item overrides

When to use Flexbox Playground

  • When centering a card or modal both horizontally and vertically and the exact property combination is not immediately obvious
  • When building a header with logo on the left and navigation on the right using space-between alignment
  • When creating a wrapping card grid where items grow to fill rows without a fixed column count
  • When debugging a layout where items are not aligning as expected and want to isolate which property controls the behavior
  • When teaching or learning flexbox and need a visual sandbox to connect property values to rendered behavior
  • When designing a sidebar-plus-content layout and need to verify how flex items share space

Examples

Centered card row

Input: direction: row, justify-content: center, align-items: center, gap: 16px

Output: .container { display: flex; justify-content: center; align-items: center; gap: 16px; }

Header with logo and nav

Input: direction: row, justify-content: space-between, align-items: center

Output: .header { display: flex; justify-content: space-between; align-items: center; }

Wrapping card grid

Input: direction: row, flex-wrap: wrap, gap: 24px, items: flex: 1 1 280px

Output: .grid { display: flex; flex-wrap: wrap; gap: 24px; } .card { flex: 1 1 280px; }

Tips

  • justify-content controls the main axis and align-items controls the cross axis — remember this pair and the axis they act on always flips together with flex-direction
  • flex: 1 is the cleanest shorthand for equal-share growth — it expands to flex: 1 1 0, starting all items at zero basis and growing proportionally
  • Prefer gap over margins for flex item spacing — gap respects wrap boundaries and does not add space at container edges
  • flex-wrap: wrap combined with flex: 1 1 280px creates a responsive card grid that adapts without any media queries
  • Flexbox is intentionally one-dimensional — if you find yourself fighting it for two-dimensional alignment, switch to CSS grid

Frequently Asked Questions

What is the difference between justify-content and align-items?▾
justify-content controls spacing along the main axis (horizontal in row direction, vertical in column). align-items controls alignment on the cross axis (vertical in row, horizontal in column). The axis each controls flips when you change flex-direction.
When should I use flexbox vs grid?▾
Use flexbox for one-dimensional layouts — a row of navigation items, a toolbar, a centered card. Use CSS grid for two-dimensional layouts where you need explicit rows and columns to align content across both axes simultaneously, like a page scaffold or a card grid with aligned cell heights.
How do main axis and cross axis change with flex-direction?▾
In flex-direction: row (default), the main axis runs horizontally left-to-right and the cross axis runs vertically. In flex-direction: column, the main axis runs vertically top-to-bottom and the cross axis runs horizontally. justify-content always applies to the main axis regardless of direction.
What does flex: 1 actually mean?▾
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0. It means the item grows to fill available space, shrinks when space is tight, and starts from zero basis. Multiple items with flex: 1 share the available space equally.
How do I center a single item with flexbox?▾
On the flex container, set justify-content: center to center on the main axis and align-items: center to center on the cross axis. If you also set the container to height: 100% or a specific height, the single child will be centered both horizontally and vertically.
Why doesn't flex-grow work without flex-basis?▾
flex-grow distributes the remaining space after all items have taken their base size. If items have content-driven sizes without an explicit flex-basis, the base sizes consume most space and flex-grow distributes the leftover. flex: 1 sets flex-basis: 0 to give flex-grow maximum control over size distribution.
How is gap different from margin between flex items?▾
gap applies spacing between all adjacent flex items consistently without adding margin at the container edges. Margin requires edge-trimming workarounds (negative margins or :first-child/:last-child rules) to avoid double spacing at edges. gap is cleaner and handles all cases including wrapped rows.
Can I use flex inside flex (nested layouts)?▾
Yes. Any flex item can itself be a flex container by setting display: flex on it. Nested flex is common for complex UIs — a row container with an item that uses column flex internally. Each flex context is independent; properties on an outer container do not affect inner container behavior.

Explore the category

CSS Grid Playground Prototype grid templates, gaps, and alignment with a responsive preview and CSS export. Box Shadow Generator Tune blur, spread, offsets, color, and inset shadows with an instant CSS preview. CSS Transform Playground Combine translate, rotate, scale, and skew with live matrix feedback and CSS export. CSS Filter Playground Stack blur, color, and tonal CSS filters with sliders and copy-ready filter declarations. Container Query Helper Author @container boilerplate with names and breakpoints for component-driven responsive CSS. CSS Minifier Minify CSS by removing comments and whitespace
Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min

Glossary

Flex Container
An element with display: flex or display: inline-flex. Establishes a flex formatting context for its direct children and exposes all flex container properties.
Flex Item
A direct child of a flex container. Flex items participate in the flex layout algorithm and respond to flex-grow, flex-shrink, and flex-basis properties.
Main Axis
The primary axis of a flex container along which flex items are placed. Runs horizontally in flex-direction: row and vertically in flex-direction: column.
Cross Axis
The axis perpendicular to the main axis in a flex container. align-items and align-self control item placement on this axis.
Justify Content
A flex container property that distributes space between and around items along the main axis. Common values: flex-start, center, flex-end, space-between, space-around, space-evenly.
Align Items
A flex container property that controls how items are aligned on the cross axis within a single row or column. Common values: stretch (default), center, flex-start, flex-end, baseline.