Developer Tools New Tool

Free Online CSS Flexbox Generator with a Live Preview

Set direction, wrap, justify-content, align-items, align-content and both gaps on a real flex container, then click any box in the preview to give that single item its own grow, shrink, basis, align-self and order. The rules come out ready to paste, and the item rule appears only when it differs.

Free Forever Nothing Uploaded Container and item Runs in your browser

Free Online CSS Flexbox Generator with a Live Preview

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Flexbox Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Click a box to select it. The item controls below then apply to that box only. Selected: Item 1

CSS

Container display flex-direction flex-wrap

Alignment justify-content align-items align-content

Gap and boxes row-gap 12px column-gap 12px Boxes 5

Selected item flex-grow flex-shrink flex-basis align-self order

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a Flexbox Layout

A few steps, and nothing is uploaded.

Set up the container Choose flex or inline-flex, pick a direction, and decide whether the boxes may wrap. The preview is a real flex container, so it behaves exactly as your page will.

Space the boxes out justify-content works along the direction you chose, align-items works across it, and row-gap and column-gap are set separately so you can have one without the other.

Edit one item Click any box in the preview. The item controls then apply to that box alone, so you can give one card flex-grow: 1 and leave the rest as they are.

Copy the rules The output holds the container rule, plus a rule for each item you changed. Items still on their defaults are left out, because they do not need a rule.

What to Know About Flexbox

Including the reason align-content so often looks broken.

align-content does nothing until the lines wrap. It spaces out multiple lines, so with flex-wrap: nowrap there is only one line and the property has nothing to move. This is the single most common reason flexbox looks like it is ignoring you. Set flex-wrap: wrap and make sure the boxes really do run onto a second line, then align-content starts working. The page shows a warning whenever you set it while wrap is off.

flex: 1 is not the same as flex-grow: 1. The flex shorthand sets three things, and flex: 1 means 1 1 0%, which resets the basis to zero. That is why flex: 1 on items of different content widths makes them equal, while flex-grow: 1 on its own keeps the content width and only shares out the leftover space. This page writes the long-hand properties so you can see which of the three you actually changed.

The default flex-shrink of 1 is why things get squashed. Every flex item may shrink below its content width unless you stop it. A long word or a fixed-width image inside a row can be crushed, and the fix is usually flex-shrink: 0 on that one item rather than a width on the container. Set the shrink value to 0 here and watch the box hold its size.

This page writes rules, it does not read them. You cannot paste an existing flex rule in and have the controls move to match, and the preview boxes are plain squares rather than your real content, so anything that depends on the content size, such as baseline alignment of different font sizes, will only be approximate. Use it to reason about the properties, then test with your own markup.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Every container property Direction, wrap, both alignment axes, align-content and both gaps.

Click to select an item The item controls apply to the box you clicked, not to all of them.

Real flexbox preview The rule is applied to a real container, so wrapping is genuine.

Warns about align-content Tells you when the property cannot work because nothing wraps.

Only the rules you need Item rules appear when an item differs from the defaults.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Flexbox Generator

Flexbox is a one dimensional layout model: you choose a main axis, and everything else follows from that. Most of the confusion comes from the fact that the properties change meaning when you change the direction, so justify-content is horizontal in a row and vertical in a column, while align-items is the other way round. Seeing it move is worth more than reading the definitions again.

This page puts a real flex container next to the controls. Every change is applied to the container element itself, so the boxes wrap when they genuinely run out of room rather than when a simulation decides they should. The number of boxes is adjustable from three to eight for the same reason, because wrapping behaviour is invisible until there are enough items to wrap.

The hard part was the item side. Most generators only do the container, which leaves out the half of flexbox that people actually get stuck on. Here you click a box to select it, the item controls load that box, and the output grows a small rule for it. Items left on their defaults produce no rule at all, so the output stays as short as a hand written one.

Frequently Asked Questions

Wrapping, basis, shrinking and the gap property.

Because it only spaces out multiple lines, and by default a flex container has one line. Set flex-wrap: wrap and make sure there are enough items, or enough width pressure, for a second line to exist. If there is one line, use align-items instead, which aligns items within that line.

flex-basis is the starting size along the main axis before growing and shrinking are applied, and in a row it wins over width. Using flex-basis: 0 tells the browser to ignore the content size and share the space purely by flex-grow, which is how equal columns are made. Setting it to auto means the content size is the starting point.

Yes, for flexbox it is supported in every current browser, and it has been for several years. It is a better approach than margins on children because it does not add space on the outside edges and there is no last-child rule to write. This tool writes row-gap and column-gap separately so you can see which axis a value is on.

Because flex-shrink defaults to 1, so items are allowed to shrink when space runs short. Set flex-shrink: 0 on the item that must keep its size, which is usually an icon, an avatar or a fixed control. Note that a very long unbroken word also needs min-width: 0 on the flex item before it will wrap properly.

No. The tool generates CSS from the controls and does not parse an existing rule. If you are debugging a layout you already have, set the same values here to reason about them, then apply the change in your own stylesheet. It is a deliberate limitation rather than something missing.