The Ultimate Flexbox Cheatsheet: Align Anything

Centering a div used to be the hardest problem in computer science.

Then came Flexbox.

And honestly? It's still confusing. I've been writing CSS for 10 years, and I still mix up align-items and align-content.

So I built a tool to stop the guessing. But first, let's break down the mental model you need.

The Two Axes

The secret to Flexbox is knowing your usage.

1. Main Axis: The direction your items flow (usually Left -> Right).
2. Cross Axis: Perpendicular to the flow (usually Top -> Bottom).

When you type flex-direction: column, the axes rotate. This is where everyone gets lost. "Justify" always works on the Main Axis. "Align" always works on the Cross Axis.

The Properties You Actually Need

You don't need to memorize everything. These 3 properties cover 90% of use cases:

1. justify-content (Main Axis)

• center: Put everything in the middle.
• space-between: Push the first item to the start, the last to the end. Perfect for Navbars (Logo on left, Links on right).

2. align-items (Cross Axis)

• center: Vertically center text in a button.
• stretch: Make all columns the same height (Equal height cards).

3. gap

Stop using margins. Seriously. gap: 1rem creates space between items but not on the outside edges. It's cleaner and requires zero math.

Visualizing the Layout

Memorizing text is hard. interacting with boxes is easy.

We built a Flexbox generator that lets you click buttons to see exactly what happens.

• Toggle flex-wrap and watch items drop to the next line.
• Switch to column and watch justify-content control vertical spacing instead of horizontal.

When to Use Grid?

Flexbox is 1-dimensional (Rows OR Columns). CSS Grid is 2-dimensional (Rows AND Columns).

Use Flexbox for:

• Navbars
• Card layouts
• Form inputs
• Centering icons

Use Grid for:

• Entire page layouts
• Complex galleries specifically where items need to line up in both directions.

Conclusion

CSS adds visual stability to your application. If your layout breaks on mobile, you lose trust.

Master the axes, use gap, and verify your layout with our interactive tool.

👉 Build Layouts: CSS Flexbox Playground