CSS Generators·4 min read

Flexbox Alignment Basics: Stop Guessing Justify vs Align

Somewhere in every project there's a toolbar that won't center, and the fix is usually one property away. These flexbox alignment basics cover the part tutorials rush past: flexbox has two axes, the alignment properties are split between them, and once you know which axis you're standing on, alignment stops being trial and error. You'll see which property owns which direction, how flex grow shrink basis divides leftover space, and the short list of mistakes behind most broken flex layouts. Every snippet here can be rebuilt visually in the CSS Flexbox Generator before it goes anywhere near your stylesheet.

Open the tool All insights

Where flexbox alignment eats your afternoon

The same bug, every project.

The classic case is a header: logo on the left, three nav links on the right, everything vertically centered in a 64px bar. You write display: flex, the horizontal part works, and then the vertical centering fight begins. You try justify-content: center. Nothing. You add margins. Almost. Twenty minutes later the bar works and you're not entirely sure why.

The same pattern repeats in card footers, form rows, and button groups with icons. None of these are hard layouts. They feel hard because two properties with similar names do different jobs, and guessing between them is a coin flip that costs a browser refresh each time.

Flexbox alignment basics: one axis rule ends the guessing

Learn one sentence, delete the coin flip.

Here's the whole justify vs align question resolved in one sentence: justify-content works along the main axis, align-items works along the cross axis, and flex-direction decides which way the main axis points. With flex-direction: row, the default, the main axis runs horizontally, so justify-content spreads items left to right and align-items handles the vertical.

Flip to flex-direction: column and both properties swap duties. Now justify-content spaces items top to bottom and align-items controls the horizontal. Neither property means "horizontal" or "vertical" on its own; they mean "along the flow" and "across the flow". That reframe is the entire trick.

A worked flexbox header, six declarations

The snippet you'll paste most often.

Take that header bar and write it properly: display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 16px;. Six lines on the container, zero rules on the children.

Read it back with the axis rule. Space-between pushes the logo against the left edge and the nav against the right, because that's distribution along the main axis. Align-items: center lifts every child to the vertical middle of the 64px bar, because that's positioning on the cross axis. The 16px gap keeps the nav links from touching without a single margin. If you rebuild this in the CSS Flexbox Generator, changing just the direction dropdown shows the whole layout pivot in place.

Flex grow shrink basis: how flexbox splits leftover space

Alignment positions items; the flex shorthand sizes them. It bundles three values: flex-grow (how much leftover space this item claims), flex-shrink (how willingly it gives space up), and flex-basis (its starting size). The famous flex: 1 expands to 1 1 0%, meaning grow equally from a zero starting size, which is why several flex: 1 siblings end up perfectly equal.

A practical pairing: a sidebar gets flex: 0 0 240px, locked at 240px, never growing or shrinking, while the content pane gets flex: 1 and absorbs whatever the viewport offers. Two declarations, and the layout survives every window size between phone and ultrawide.

Flexbox mistakes that keep layouts broken

Most flexbox bug reports trace back to one of these:

Reaching for justify-content to center vertically in a row container. Wrong axis; that job belongs to align-items.
Forgetting flex-wrap defaults to nowrap, so items silently shrink or overflow instead of wrapping to a second line.
Setting width on flex items and expecting it to hold. Flex-shrink will still compress them; flex-basis with flex-shrink: 0 is the honest version.
Simulating gap with margins, then writing first-child and last-child exceptions that break the moment items wrap.
Expecting align-items: baseline to do something useful on items with no text in them; it falls back to the bottom edge and looks arbitrary.

Two flexbox habits that pay off daily

First, when a flex layout misbehaves, check flex-direction before touching anything else. Nine times out of ten the "broken" property is doing its job correctly on an axis you forgot you rotated.

Second, stress-test with fake volume before real content arrives. Crank the item count to 15 or 20, toggle wrap on and off, and watch what happens at the extremes. Thirty seconds of playing with a preview catches the overflow bug that would otherwise ship to production.

When flexbox is the wrong tool for the layout

Flexbox thinks in one dimension at a time. A row of tags, a toolbar, a centered hero: all one-axis problems, all flexbox. But the moment you're aligning things across both rows and columns simultaneously, a dashboard, a page scaffold with header, sidebar, and footer, you're fighting the tool.

For those two-dimensional jobs, open the CSS Grid Generator and define rows and columns as first-class tracks instead of coaxing wrapped flex lines into looking like a grid. And once your flex container holds items you want to animate into view, the CSS Animation Generator will wrap entrance keyframes around them without any hand-written syntax.