The comprehensive 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

Common Flexbox bugs I've debugged in production

After reviewing hundreds of pull requests and debugging layout issues across different browsers, here are the patterns that keep showing up:

Items overflowing the container. A flex child with a long word or URL can push past the container boundary. The fix: add min-width: 0 to the flex child, or overflow: hidden on the container. Flex items default to min-width: auto, which means they won't shrink below their content size. This catches everyone at least once.

The mystery of unequal heights. You set align-items: stretch on the parent, but the children still aren't equal height. Usually the problem is that one child has a fixed height that overrides the stretch. Check for explicit height, min-height, or max-height values on the children.

Flex items wrapping when you don't want them to. If items wrap to a new line unexpectedly, check whether flex-shrink is set to 0 on any child. Also verify that no child has a width or flex-basis that exceeds the container when combined with gaps.

The gap property not working. If you're using gap on a flex container and it's not showing up, check your browser support. As of 2024, all major browsers support it, but if you're testing in an older environment, it won't render. The fallback was margins, which is why you'll see margin-right patterns in older codebases.

Accessibility considerations

Flexbox affects how screen readers navigate your content. A few things to keep in mind:

• order changes visual position but not DOM order. Screen readers follow the DOM, not the visual layout. If you rearrange items with order, the reading sequence stays the same.
• flex-direction: column-reverse visually flips the order but doesn't change tab order. Keyboard users will tab through items in DOM order, which may feel wrong if the visual order is reversed.
• Hiding items with display: none on a flex child removes them from the accessibility tree entirely. If you want to visually hide but keep accessible, use a sr-only utility class instead.

These edge cases rarely show up in blog post examples but they show up constantly in real applications.

Flexbox naming that confuses everyone

The naming in Flexbox is the source of most confusion. Here is a plain-English breakdown:

• justify-content controls the MAIN axis. Always. Even when the main axis is vertical.
• align-items controls the CROSS axis. Always. Even when the cross axis is horizontal.
• flex-direction decides which axis is main and which is cross. Change the direction and the axes flip.

When you set flex-direction: column, the main axis becomes vertical. So justify-content: center centers items vertically, not horizontally. This is the single most confusing aspect of Flexbox. Once you internalize that justify always controls the main axis and align always controls the cross axis, everything else follows.

The shorthand property place-items combines justify-items and align-items. The shorthand place-content combines justify-content and align-content. These exist but most developers never use them because the longhand properties are clearer.

Performance characteristics

Flexbox layout calculation is fast. The browser can compute flex layouts in microseconds for typical use cases. But there are performance considerations:

Avoid nesting deep flex containers. Each nested flex container requires a separate layout pass. A page with five levels of nested flex containers is slower to render than the same layout with fewer nesting levels.

flex-basis: 0 with flex-grow: 1 is faster than percentage widths. When items share space equally, flex: 1 tells the browser to distribute remaining space without calculating percentages. The math is simpler.

Animations on flex properties are expensive. Animating flex-grow, flex-shrink, or flex-basis triggers layout recalculation on every frame. If you need to animate the size of flex items, animate their width or height instead and let Flexbox handle the distribution.

For most interfaces, these differences are negligible. But in performance-critical dashboards with hundreds of flex items, they can matter.

Common patterns and when to use each

Centering a single item: display: flex; justify-content: center; align-items: center;. This is the simplest centering pattern in CSS. It works for both horizontal and vertical centering.

Navigation bar with logo and links: display: flex; justify-content: space-between; align-items: center;. Logo on the left, links on the right, equal space in between.

Card grid that fills remaining space: display: flex; flex-wrap: wrap; gap: 1rem; with flex: 1 1 300px on each card. Cards wrap when they run out of room and stretch to fill the row.

Sticky footer: Put the main content in a flex container with flex: 1 and the footer outside it. The footer stays at the bottom even when content is short.

Equal-height sidebar layout: display: flex on the container. Sidebar has a fixed width. Content has flex: 1. Both stretch to the same height automatically.

These patterns cover most layout needs. For anything more complex, CSS Grid is usually the better choice.

When to use Flexbox versus Grid

This question comes up in every CSS discussion. The short answer: Flexbox for one-dimensional layouts, Grid for two-dimensional layouts.

Use Flexbox when you are arranging items in a single row or column. Navigation bars, card rows, centering a modal, aligning form labels and inputs. The items flow in one direction and you want to control how they distribute along that axis.

Use Grid when you are arranging items in rows and columns simultaneously. Page layouts, dashboards, image galleries, any design where items need to align both horizontally and vertically.

Use both together for complex layouts. A page layout might use Grid for the overall structure (sidebar, main content, footer) while using Flexbox inside the sidebar for navigation item alignment.

The mental model is straightforward: if you are deciding where things go in a line, use Flexbox. If you are deciding where things go on a plane, use Grid. In practice, you will use both on the same page.

Debugging layouts with browser DevTools

When Flexbox behaves unexpectedly, Chrome and Firefox have built-in tools that make debugging much easier.

Open DevTools, select the flex container, and look for the Flexbox icon in the Elements panel. Clicking it highlights the flex lines and shows arrows for the main axis and cross axis direction. This makes it immediately obvious whether items are wrapping, whether justify-content and align-items are doing what you expect, and where the extra space is going.

Another useful trick: in the Computed tab, you can see the resolved values of all flex properties. If an item is not sizing correctly, check its flex-basis, flex-grow, and flex-shrink values. The browser will show you exactly what it calculated.

Flexbox naming that confuses everyone

The naming in Flexbox is the source of most confusion. Here is a plain-English breakdown:

• justify-content controls the MAIN axis. Always. Even when the main axis is vertical.
• align-items controls the CROSS axis. Always. Even when the cross axis is horizontal.
• flex-direction decides which axis is main and which is cross. Change the direction and the axes flip.

When you set flex-direction: column, the main axis becomes vertical. So justify-content: center centers items vertically, not horizontally. This is the single most confusing aspect of Flexbox. Once you internalize that justify always controls the main axis and align always controls the cross axis, everything else follows.

The shorthand property place-items combines justify-items and align-items. The shorthand place-content combines justify-content and align-content. These exist but most developers never use them because the longhand properties are clearer.

Performance characteristics

Flexbox layout calculation is fast. The browser can compute flex layouts in microseconds for typical use cases. But there are performance considerations:

Avoid nesting deep flex containers. Each nested flex container requires a separate layout pass. A page with five levels of nested flex containers is slower to render than the same layout with fewer nesting levels.

flex-basis: 0 with flex-grow: 1 is faster than percentage widths. When items share space equally, flex: 1 tells the browser to distribute remaining space without calculating percentages. The math is simpler.

Animations on flex properties are expensive. Animating flex-grow, flex-shrink, or flex-basis triggers layout recalculation on every frame. If you need to animate the size of flex items, animate their width or height instead and let Flexbox handle the distribution.

For most interfaces, these differences are negligible. But in performance-critical dashboards with hundreds of flex items, they can matter.

Common patterns and when to use each

Centering a single item: display: flex; justify-content: center; align-items: center;. This is the simplest centering pattern in CSS. It works for both horizontal and vertical centering.

Navigation bar with logo and links: display: flex; justify-content: space-between; align-items: center;. Logo on the left, links on the right, equal space in between.

Card grid that fills remaining space: display: flex; flex-wrap: wrap; gap: 1rem; with flex: 1 1 300px on each card. Cards wrap when they run out of room and stretch to fill the row.

Sticky footer: Put the main content in a flex container with flex: 1 and the footer outside it. The footer stays at the bottom even when content is short.

Equal-height sidebar layout: display: flex on the container. Sidebar has a fixed width. Content has flex: 1. Both stretch to the same height automatically.

These patterns cover most layout needs. For anything more complex, CSS Grid is usually the better choice.

When to use Flexbox versus Grid

This question comes up in every CSS discussion. The short answer: Flexbox for one-dimensional layouts, Grid for two-dimensional layouts.

Use Flexbox when you are arranging items in a single row or column. Navigation bars, card rows, centering a modal, aligning form labels and inputs. The items flow in one direction and you want to control how they distribute along that axis.

Use Grid when you are arranging items in rows and columns simultaneously. Page layouts, dashboards, image galleries, any design where items need to align both horizontally and vertically.

Use both together for complex layouts. A page layout might use Grid for the overall structure (sidebar, main content, footer) while using Flexbox inside the sidebar for navigation item alignment.

The mental model is straightforward: if you are deciding where things go in a line, use Flexbox. If you are deciding where things go on a plane, use Grid. In practice, you will use both on the same page.

Debugging layouts with browser DevTools

When Flexbox behaves unexpectedly, Chrome and Firefox have built-in tools that make debugging much easier.

Open DevTools, select the flex container, and look for the Flexbox icon in the Elements panel. Clicking it highlights the flex lines and shows arrows for the main axis and cross axis direction. This makes it immediately obvious whether items are wrapping, whether justify-content and align-items are doing what you expect, and where the extra space is going.

Another useful trick: in the Computed tab, you can see the resolved values of all flex properties. If an item is not sizing correctly, check its flex-basis, flex-grow, and flex-shrink values. The browser will show you exactly what it calculated.