The Ultimate Flexbox Cheatsheet: Align Anything

10 Years of CSS and I Still Look This Up

I'm going to admit something embarrassing: after a decade of professional frontend development, I still occasionally mix up align-items and align-content. It's not that the concepts are hard—it's that the naming is just confusing enough to cause hesitation.

According to the 2023 State of CSS survey, Flexbox is the most-used layout method among professional developers, with over 95% adoption. But when asked about pain points, "remembering property names" consistently ranks in the top complaints.

You're not alone if you struggle with this. The mental model takes practice.

The Mental Model That Finally Made It Click

After teaching CSS to junior developers and writing internal documentation at three different companies, I've found that one framework makes Flexbox instantly understandable:

Think in terms of two axes.

• Main Axis: The direction items flow (default: left → right)
• Cross Axis: Perpendicular to the main axis (default: top → bottom)

Everything else is just answering: "How should items be positioned along each axis?"

When you change flex-direction: column, the axes rotate 90 degrees. That's the only tricky part—justify always controls the main axis, align always controls the cross axis, regardless of which direction is "main."

The 3 Properties That Cover 90% of Use Cases

Based on my experience reviewing thousands of lines of CSS across multiple codebases, these three properties handle almost every layout situation:

1. justify-content (Main Axis Distribution)

center: Dead center horizontally. The classic "how do I center this div" solution.

space-between: First item at start, last item at end, equal space between. Perfect for navbars (logo left, links right).

space-around: Equal space around each item. Less common but useful for card grids.

2. align-items (Cross Axis Alignment)

center: Vertically center items. Used constantly for buttons with icons.

stretch (default): Items expand to fill the container height. Why your flex columns are equal height.

flex-start/flex-end: Align to top or bottom edge.

3. gap

Stop using margins for spacing. Seriously.

gap: 1rem creates space between items but not on the outer edges. It's mathematically cleaner and doesn't require the :last-child { margin-right: 0 } hacks we used to write.

Browser support is now excellent—over 95% according to caniuse.com as of 2024.

When Flexbox Gets Confusing

The tricky cases I see developers struggle with:

Multi-line content: When items wrap to new lines, align-content controls spacing between the lines. This is different from align-items, which controls individual item alignment within each line.

Flex-grow conflicts: When multiple items have flex-grow: 1, they share available space equally. But if one also has a min-width, it can cause unexpected overflow.

Nested flex containers: The outer container controls the children, not the grandchildren. If you need to align grandchildren, make the child a flex container too.

Why I Built the Visual Playground

Reading about Flexbox is one thing. Seeing it respond to changes is another.

The Flexbox Playground lets you toggle every property and watch items rearrange in real-time. It's how I validate my mental model before writing actual code.

I built this after noticing that every time I taught Flexbox, the concepts only truly clicked when people could interact with live examples—not read documentation.

Flexbox vs. Grid: When to Use Each

Here's the rule I follow:

Flexbox = One-dimensional layouts (row OR column)

• Navbars and headers
• Cards in a row
• Form input groups
• Icon + text combinations

Grid = Two-dimensional layouts (rows AND columns)

• Full page layouts
• Complex galleries where items must align on both axes
• Dashboard widgets

They complement each other. A page layout might use Grid for the overall structure and Flexbox for individual component alignment.

The Properties Reference

For quick reference when you forget (we all do):

| Property | Axis | What It Controls | | ----------------- | ----- | ------------------------------------- | | justify-content | Main | Distribution of items along main axis | | align-items | Cross | Alignment of items on cross axis | | align-content | Cross | Spacing between wrapped lines | | flex-direction | Both | Which axis is "main" (row or column) | | gap | Both | Space between items |

👉 Build Layouts: CSS Flexbox Playground