CSS flexbox generator

What is a Css Flexbox Generator?

Flexbox is the CSS layout model for arranging items in a single row or column: navigation bars, button groups, card rows, centred content and toolbars. Its properties are easy to confuse, so this generator lets you change each one and immediately see the effect on sample items before copying the CSS.

How to use it

Choose the direction, row or column.
Set justify-content, align-items, wrapping and gap.
Watch the preview and copy the container CSS.

Key properties

flex-direction: sets the main axis: row (horizontal) or column (vertical).
justify-content: distributes items along the main axis: flex-start, center, space-between, space-around, space-evenly.
align-items: aligns items on the cross axis: stretch, center, flex-start, baseline.
flex-wrap: allows items to move to a new line when space runs out.
gap: spacing between items without margins.

Common recipes

Perfect centring: display: flex; justify-content: center; align-items: center;
Navbar with logo left and links right: display: flex; justify-content: space-between; align-items: center;
Wrapping card row: display: flex; flex-wrap: wrap; gap: 1rem; with flex: 1 1 250px on each card.

Flexbox or Grid?

Use flexbox for one-dimensional layouts where content size drives the layout. Use CSS Grid when you need rows and columns aligned together, such as page layouts and galleries.

Frequently Asked Questions

How do I centre a div with flexbox?

On the parent, set display flex, justify-content center and align-items center.

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

justify-content aligns items along the main axis, align-items along the cross axis. In a row, that means horizontally and vertically respectively.

Why do my flex items not wrap?

flex-wrap defaults to nowrap. Set it to wrap so items can move to a new line.

When should I use Grid instead of flexbox?

Use Grid for two-dimensional layouts where both rows and columns must line up.