CodeKeetCodeKeet

Flexbox Playground

Experiment with every CSS Flexbox property and see the effect live. 100% client-side.

Presets
A
B
C
D
Click an item to edit its properties. Container: row, justify: flex-start, align: stretch.
Container CSS
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  gap: 12px;
}
Item "A" CSS
.item-a {
  width: 100px;
  height: 80px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

Container

Items (4/8)

Editing item "A"

📖 Flexbox property reference

flex-direction
Sets the main axis: row, row-reverse, column, column-reverse.
flex-wrap
Allows items to wrap to a new line: nowrap, wrap, wrap-reverse.
justify-content
Distributes items along the MAIN axis.
align-items
Aligns items along the CROSS axis.
align-content
Distributes wrapped lines. Only works with wrap + multiple lines.
gap
Space between items (row-gap + column-gap).
flex-grow / flex-shrink / flex-basis
How an item grows, shrinks, and its initial size.
align-self / order
Per-item override of align-items and visual order.
🔒 100% private: All experimentation happens in your browser. Your layout is never sent to any server.

About Flexbox Playground

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model for arranging items in a row or column. It solves alignment and distribution problems that were difficult with floats and inline-block. Flexbox has two axes: the main axis (set by flex-direction) and the cross axis. Container properties (justify-content, align-items, align-content, gap) control all children; item properties (flex-grow, flex-shrink, flex-basis, align-self, order) control individual children. Learning flexbox is easier with a visual playground: change a value, see the immediate effect, and build intuition. This tool gives you every property with sliders and dropdowns, configurable items, and a live preview.

How It Works

  1. Set the container properties: display, flex-direction, flex-wrap, justify-content, align-items, align-content, gap.
  2. Add or remove child items (up to 8).
  3. For each item, configure width/height, flex-grow, flex-shrink, flex-basis, align-self, order.
  4. See the layout update live as you change values.
  5. Copy the generated CSS.

✨ Key Features

  • ✓All flex container properties
  • ✓All flex item properties
  • ✓Live preview with adjustable items
  • ✓1–8 configurable child items
  • ✓Visual item editor
  • ✓Adjustable container size
  • ✓Toggle outlines for item visibility
  • ✓Copy container CSS and item CSS
  • ✓Property reference with descriptions
  • ✓Preset layouts (nav bar, centered card, grid-like)
  • ✓100% client-side — no data sent to any server

🎯 Common Use Cases

  • →Learning flexbox by experimenting
  • →Prototyping a layout before coding
  • →Debugging flexbox alignment issues
  • →Generating CSS for a specific layout
  • →Teaching flexbox in a classroom or workshop
  • →Understanding justify-content vs align-items
  • →Testing responsive layouts
  • →Comparing gap vs margin-based layouts

💡 Advanced Tips & Pro Insights

  • ▸flex-direction changes the MAIN axis. If direction is "row", justify-content aligns horizontally, and align-items aligns vertically. If direction is "column", they swap.
  • ▸justify-content distributes items along the main axis. align-items aligns them along the cross axis.
  • ▸align-content only works when flex-wrap is set AND items wrap to multiple lines. With one line, it has no effect.
  • ▸flex-grow controls how much an item grows when there is extra space. flex-shrink controls how much it shrinks when there is not enough space. flex-basis is the initial size.
  • ▸The shorthand flex: 1 means flex: 1 1 0% (grow, shrink, basis). flex: auto means 1 1 auto. flex: none means 0 0 auto.
  • ▸gap is the modern way to add space between items — simpler than margins and no negative margin tricks.
  • ▸align-self overrides align-items for a single item — useful for one-off alignments.

Frequently Asked Questions

Is this Flexbox playground free?▾
Yes, this Flexbox playground is completely free with no signup, email, or usage limits.
Is my data safe?▾
Yes, 100% safe. All experimentation happens in your browser. Nothing is sent to any server.
What is Flexbox?▾
Flexbox (Flexible Box Layout) is a CSS layout model for arranging items in one dimension (row or column). It provides powerful alignment and distribution controls that were difficult with older techniques.
What is the difference between justify-content and align-items?▾
justify-content distributes items along the main axis (horizontal for row, vertical for column). align-items aligns items along the cross axis (perpendicular to the main axis).
What is the difference between flex-grow and flex-shrink?▾
flex-grow controls how much an item grows when there is extra space. flex-shrink controls how much it shrinks when space is limited. Both are relative weights.
What does flex: 1 mean?▾
flex: 1 is shorthand for "flex: 1 1 0%". It means the item grows to fill available space, shrinks if needed, and has an initial basis of 0%. All items with flex: 1 will be equal width.
When does align-content do anything?▾
align-content only takes effect when flex-wrap is wrap (or wrap-reverse) AND the items wrap to multiple lines. With a single line, align-content has no visible effect.
Should I use gap or margins?▾
Use gap. It is cleaner, applies spacing only between items (not on the outside), and does not require negative margin workarounds. Supported in all modern browsers.