CSS Flexbox Generator

Experiment with CSS flexbox visually. Set direction, wrap, justify-content, align-items, align-content, gap and size, adjust grow, shrink and basis, edit individual items, see the main and cross axes, and copy the CSS.

Developer Runs client-side Free to use

Jump to the tool

About the CSS Flexbox Generator

CSS Flexbox Generator is a visual playground for flexbox. A container with numbered sample items responds instantly as you change flex-direction, flex-wrap, justify-content, align-items, align-content, gap and the container’s width and height. You can also set flex-grow, flex-shrink and flex-basis for all items and change how many sample items there are.

Turn on single-item editing, or simply select an item in the preview, to give that item its own order, align-self, grow, shrink or basis. A small explanation panel shows which way the main axis and cross axis run for the current direction and wrap settings, and which properties act along each. The generated CSS stays concise: the container rule, an item rule only when the shared item values differ from the default, and nth-child rules only for items you changed. All values come from fixed menus and range-checked numbers.

How to use

Choose flex-direction, flex-wrap and the alignment options for the container.
Set the gap, container width and height, and the number of sample items.
Adjust flex-grow, flex-shrink and flex-basis for all items.
Select an item (or tick Edit a single item) to change its order, align-self, grow, shrink or basis.
Copy the generated CSS or download it as a .css file.

Key features

Live preview with up to 12 numbered sample items.
All container properties: direction, wrap, justify-content, align-items, align-content and gap.
Shared grow, shrink and basis controls for every item.
Per-item order, align-self, grow, shrink and basis overrides.
Main-axis and cross-axis explanation that follows your settings.
Concise generated CSS with Copy, Download .css and Reset.

Best practices

Think in axes: justify-content works along the main axis and align-items across it.
Remember that align-content only matters when items wrap onto more than one line.
Use gap instead of margins between flex items for simpler spacing.
Prefer flex-basis with grow and shrink over fixed widths for responsive layouts.
Use order sparingly: it changes visual order but not the reading or tab order for keyboard and screen-reader users.

Benefits

Understand how each flexbox property behaves by seeing it change.
Get clean CSS that matches the layout you see.
Debug alignment problems faster.
Works in your browser with nothing to install.

Frequently asked questions

What is the difference between the main axis and the cross axis?

The main axis follows flex-direction: horizontal for row and row-reverse, vertical for column and column-reverse. The cross axis runs at right angles to it. justify-content and flex-grow/shrink/basis act along the main axis; align-items, align-self and align-content act across it.

Why does align-content not change anything?

align-content spaces out lines of items, so it only has a visible effect when flex-wrap is wrap or wrap-reverse and the items actually wrap onto more than one line, with spare space in the container.

How do I edit a single item?

Select the item in the preview, or tick Edit a single item and pick it from the list. You can then set its order, align-self, flex-grow, flex-shrink and flex-basis. Clear This Item removes its overrides.

What does the generated CSS include?

A .container rule with the container settings, an .item rule when the shared grow/shrink/basis differ from the default 0 1 auto, and .item:nth-child(n) rules only for items you customised.

Does order change accessibility?

order changes only the visual order. Screen readers and keyboard focus still follow the order in the HTML, so avoid using order for content where the sequence matters.

Which browsers support this CSS?

The generated properties are standard flexbox supported by all current major browsers. The tool does not add legacy prefixes or target very old browsers.