CSS Flexbox Generator

How to use CSS Flexbox Generator

1. Set flex-direction to row or column — this decides what the other properties mean.
2. Adjust justify-content to distribute items along that axis.
3. Adjust align-items to align them across it.
4. Turn on wrapping if items should move to a new line, then copy the generated CSS.
5. gap works in flexbox in every current browser — use it instead of margins on children.
6. align-content only has an effect when items wrap onto multiple lines; on a single line it does nothing, which is a frequent source of confusion with align-items.
7. An item’s own align-self overrides the container’s align-items for that item alone.

Main axis and cross axis, and why the names change meaning

justify-content aligns along the main axis; align-items aligns across it. Which direction those are depends entirely on flex-direction: with row, the main axis is horizontal, so justify-content moves things left and right. Switch to column and the same property now moves them up and down. Nearly every moment of confusion with flexbox comes from reaching for justify-content when the direction has changed under you. Learn the pair as “along” and “across” rather than as horizontal and vertical.

The centring problem, solved

display: flex with justify-content: center and align-items: center centres a child both ways, in two lines, on a container of any size. This was genuinely difficult before flexbox — the old approaches involved absolute positioning with negative margins, or table-cell display, and none worked for content of unknown height. If you learn one flexbox pattern, learn this one.

flex-wrap, and the three-number shorthand

By default flex items refuse to wrap and shrink instead, which is why a row of cards gets narrower and narrower on a phone rather than stacking. flex-wrap: wrap lets them move to a new line. On the items themselves, flex is shorthand for grow, shrink and basis: flex: 1 means grow to fill the space, flex: 0 0 auto means keep your natural size, and flex: 1 1 300px means start at 300px and flex from there — which, with wrap, is the whole recipe for a responsive card grid without a media query.

When to use grid instead

Flexbox lays out one dimension; grid lays out two. If you are aligning a row of buttons, centring something, spacing a navbar, or distributing items along a line, flexbox is simpler and right. If you need rows and columns to align with each other — a page layout, a dashboard, a genuine table of cards where column three lines up across every row — that is grid. They compose: a grid of cards whose contents are each laid out with flex is entirely normal.