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

justify-content positions items along the main axis (horizontal in a row, vertical in a column), while align-items positions them along the cross axis (the perpendicular direction). Switching flex-direction from row to column swaps which physical axis each one controls, which is why the playground lets you flip direction and watch both update live.

How do flex-grow, flex-shrink and flex-basis work together?

flex-basis sets an item starting size before free space is shared. flex-grow decides how greedily an item expands to fill leftover space (0 means it never grows), and flex-shrink decides how readily it gives up space when the container is too small (0 means it never shrinks). The shorthand flex: grow shrink basis combines all three, and the playground writes that exact line for the selected item.

Why does align-content do nothing in my layout?

align-content only has an effect when items wrap onto more than one line, so it needs flex-wrap set to wrap or wrap-reverse and enough items to overflow a single line. With nowrap there is only one line to align, so the property is disabled in the controls until you enable wrapping.

What does the order property do?

order changes the visual position of an item without moving it in the HTML. Items are laid out from lowest order to highest (default 0), so giving a box order -1 floats it to the front and order 2 pushes it toward the end. It is purely visual — screen readers and tab order still follow the real DOM order, so use it carefully for accessibility.

Is the generated CSS production-ready?

Yes. The tool only writes the declarations you actually changed, using the gap shorthand and the flex shorthand where they apply, and targets each item with a nth-child selector. You can paste the .flex-container rule and the matching HTML straight into a real project and it will behave exactly like the preview.

Does anything I build get uploaded or saved online?

No. The entire playground runs in your browser with no network calls. Your current layout is auto-saved to this browser local storage so it survives a refresh, but it never leaves your device and nothing is sent to a server.

Flexbox Playground — Gera Tools

The Flexbox Playground turns CSS flexbox from guesswork into something you can see. Instead of editing a stylesheet, refreshing, and squinting at the result, you adjust every flexbox property with visual controls and watch a row of live boxes rearrange in real time. When the layout looks right, you copy clean, ready-to-paste HTML and CSS and drop it into your project. Everything happens in your browser — there is no build step, no account, and nothing is uploaded.

Most online flexbox tools only expose the container properties. This one goes further: alongside flex-direction, flex-wrap, justify-content, align-items, align-content and the gap, you can click any individual box and tune its per-item behaviour — flex-grow, flex-shrink, flex-basis, align-self and order. That second layer is exactly where flexbox usually gets confusing, so being able to isolate one item and watch only it respond makes the mental model click. It is equally useful as a teaching aid and as a fast scaffolding tool for real component layouts.

How it works

A flex container has two axes. The main axis runs in the direction set by flex-direction (horizontal for row, vertical for column), and the cross axis is perpendicular to it. justify-content distributes items along the main axis; align-items aligns them on the cross axis; and align-content spaces multiple wrapped lines — which is why it only matters once flex-wrap is on. The playground mirrors these rules: enable wrapping and the align-content control wakes up, flip the direction and the two alignment controls quietly swap which physical axis they govern.

Per item, flex-basis sets a starting size, then flex-grow shares out spare space and flex-shrink reclaims space under pressure. Select a box and the tool shows the resulting flex: grow shrink basis shorthand it will emit. When you export, it writes a .flex-container rule plus a :nth-child() rule for every item you actually customised — never noise for properties left at their defaults.

Example

Suppose you want a typical navigation bar: a logo pinned left, links pinned right, everything vertically centred. Load the Navbar preset (justify-content: space-between, align-items: center) and you are most of the way there. Now click the last box and set its flex-grow to 1 to let a search field stretch and fill the middle. Press Copy HTML + CSS and you get something like:

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.flex-container > :nth-child(4) {
  flex: 1 1 auto;
}

Paste that with the matching markup and the layout behaves exactly as it did in the preview — a real, working flexbox component, built by sight in under a minute. Your current arrangement is auto-saved to this browser, so you can close the tab and pick up where you left off.