CSS Flexbox Generator

How to use the css flexbox generator

1. Adjust the controls and watch the preview update.
2. Read the generated CSS below the controls.
3. Copy it into your stylesheet.

About this tool

Flexbox lays items out along one axis. The confusion almost everyone hits is that justify-content works along the main axis and align-items across it — so when flex-direction is column, justify-content controls vertical position, not horizontal. Changing direction swaps what those two properties do.

By default items do not wrap: they shrink to fit instead, which is why a row of cards can squash into slivers on a narrow screen. Setting flex-wrap: wrap is usually what you actually wanted.

Use gap rather than margins on the children. It only applies between items, so there is no stray edge margin to strip off the first and last one.

Common uses

• Centring something both ways without guessing.
• Building a toolbar with items pushed to opposite ends.
• Working out why items are squashing instead of wrapping.

Frequently asked questions

How do I centre something perfectly?

display: flex with justify-content: center and align-items: center on the container. It works in both axes regardless of the child's size.

Why does justify-content move things vertically?

Because flex-direction is column. justify-content always follows the main axis, which direction defines, and align-items follows the cross axis.

Should I use flexbox or grid?

Flexbox for one direction — a row or a column. Grid when you need rows and columns to line up together.