~/frontend-tools/flexbox-cheatsheet

Flexbox Cheat Sheet

ToolRuns in your browserNothing is uploadedFree · no sign-up

Every flexbox property in one place, each with clickable values and a live demo. Change flex-direction, justify-content, align-items or an item's flex-grow and watch the boxes move, then copy the CSS that produced the layout.

Container properties

flex-direction

Sets the main axis: the direction items are laid out in.

flex-wrap

Whether items may move onto new lines when there is not enough room.

justify-content

Distributes items and free space along the main axis.

align-items

Aligns items on the cross axis within each line.

align-content

Spaces wrapped lines on the cross axis. Has no effect on a single line.

gap

Space between items, never on the outer edges.

Item properties apply to the highlighted item; click an item to select it

flex-grow

How much of the spare space this item takes.

flex-shrink

Whether the item gives up space when the line is too narrow. 0 keeps its size.

flex-basis

The starting size before growing or shrinking.

align-self

Overrides align-items for this item only.

order

Moves the item visually. Screen readers still follow the HTML order.

CSS

Using the Flexbox Cheat Sheet

Container properties

Flexbox starts with display: flex on a parent. The container decides the direction (flex-direction), whether items may wrap (flex-wrap), how they are spread along the main axis (justify-content), how they line up on the cross axis (align-items), how wrapped lines are spaced (align-content) and the gap between items.

Item properties

Each child can change its own behaviour. flex-grow says how much spare space it takes, flex-shrink how much it gives up when space runs out, and flex-basis its starting size before growing or shrinking. order moves it visually and align-self overrides the container's cross-axis alignment for just that item.

The flex shorthand

flex: 1 is short for grow 1, shrink 1 and a basis of 0%, which makes items share space equally regardless of their content. flex: auto uses the content size as the basis, and flex: none keeps the item at its natural size.

Accessibility note

order and the reverse directions change only the visual order. Screen readers and keyboard tabbing still follow the HTML order, so keep the source order logical and use these properties for small visual tweaks.

Frequently asked questions

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

justify-content works along the main axis (horizontal for a row), align-items along the cross axis (vertical for a row). In a column they swap.

Why do my items not wrap?

flex-wrap defaults to nowrap. Set it to wrap so items move to a new line instead of shrinking.

Is there a generator?

Yes. The CSS flexbox generator builds a container layout with sliders and copies the CSS.