Back to Tools

Flexbox Generator

Design flexible layouts with interactive controls

Layout Pro

Container Properties

Gap: 10px

Selected Item Properties

Editing Item #-

Flex Grow

Flex Shrink

Align Self

Quick Actions

Interactive Layout Preview

See Flexbox rules in action

Flexbox is easy to use but hard to memorise: which property moves items along the main axis, and what changes when the direction flips? This generator lets you change container settings and single-item settings, then shows the effect on a group of numbered boxes. When the layout looks right, you copy the CSS.

Building a layout

In Container Properties, choose the direction (row or column), justify (flex-start, center or space-between), align (stretch, center or flex-end) and wrap (nowrap or wrap). Drag the Gap slider from 0 to 50 pixels.
The preview holds three items to begin with. Click + Add Item to insert more.
Click any numbered box to select it. The heading in Selected Item Properties shows which one you are editing.
Change its Flex Grow, Flex Shrink and Align Self (auto, flex-start, center or stretch).
Click Generate Flexbox CSS. The container updates and the code appears below.
Press Copy CSS to copy it.

What you get

The first block is a .container rule with display flex, flex-direction, justify-content, align-items, flex-wrap and gap. After it, any item you changed receives its own rule such as .item-2, holding flex-grow, flex-shrink and align-self. Items left at their defaults are omitted, which keeps the output short.

Good ways to use it

Learning how justify-content and align-items swap roles when you switch from row to column.
Prototyping a navigation bar, toolbar or card row before writing real markup.
Seeing how flex-grow lets one item absorb the remaining space while others keep their size.
Testing what wrap does when many items no longer fit on one line.

Notes and limits

The tool offers a focused set of values rather than every option in the specification. There is no space-around, no flex-end for justify, no flex-basis, order or wrap-reverse, so add those by hand in the copied code. Items cannot be removed once added, but reloading the page returns to three. Container changes appear in the preview when you press Generate, while item settings show up straight away.

The classes .container and .item-1, .item-2 and so on are placeholders numbered by position. Rename them to match your markup, and remember that the number refers to the box order in this preview, not to your own HTML. Flexbox is one-dimensional, so if you need to control rows and columns at once, the Grid Generator on this site may suit you better.

Related Articles

CSS Flexbox: A Practical Visual Guid

Related Tools

Frequently Asked Questions

How do I edit a single item?

Click a numbered box in the preview. The Selected Item Properties panel then shows that item, and you can change flex-grow, flex-shrink and align-self. Only items with non-default values appear in the CSS.

Which flex values are missing?

The tool covers row and column, three justify and three align options, nowrap or wrap, gap, grow, shrink and align-self. Values like space-around, order, flex-basis and wrap-reverse must be added manually.

Can I remove an item?

There is no delete button for items. You can keep adding more with + Add Item, and refreshing the page resets the preview back to the original three items and default settings.

Why does the preview not change when I adjust a container setting?

Container settings are applied to the preview and the code when you click Generate Flexbox CSS. Moving a control hides the old result, so press the button again to update.

What are the class names in the output?

The container rule is called .container, and any changed items are called .item-1, .item-2 and so on by position. They are placeholders, so rename them to match your own HTML.