CSS Flexbox Cheat Sheet with Common Layout Patterns

Overview

This guide gives you two things: a compact flexbox properties reference and a set of layout recipes you can reuse in projects. It is written for day-to-day implementation rather than theory alone.

At a glance, flexbox works in two layers:

• Flex container properties control how child elements are arranged.
• Flex item properties control how individual children grow, shrink, align, or reorder.

The starting point is usually simple:

.container {
  display: flex;
}

Once an element becomes a flex container, its direct children become flex items.

Core container properties

These are the properties you will use most often on the parent element.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 1rem;
}

• display: flex — creates a block-level flex container.
• display: inline-flex — creates an inline-level flex container.
• flex-direction — sets the main axis: row, row-reverse, column, column-reverse.
• flex-wrap — controls whether items stay on one line or wrap: nowrap, wrap, wrap-reverse.
• justify-content — aligns items along the main axis.
• align-items — aligns items along the cross axis.
• align-content — aligns multiple rows or columns when wrapping creates extra lines.
• gap — adds consistent spacing between items without margin hacks.

Core item properties

.item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  flex: 0 1 auto;
  align-self: auto;
  order: 0;
}

• flex-grow — how much an item can expand relative to siblings.
• flex-shrink — how much an item can shrink when space is limited.
• flex-basis — the initial size before free space is distributed.
• flex — shorthand for grow, shrink, and basis.
• align-self — overrides align-items for one item.
• order — changes visual order without changing DOM order.

Fast mental model

If you only remember one rule, remember this: justify-content controls the main axis, align-items controls the cross axis. The main axis depends on flex-direction.

• If flex-direction: row, main axis is horizontal and cross axis is vertical.
• If flex-direction: column, main axis is vertical and cross axis is horizontal.

Flex shorthand patterns worth memorizing

• flex: 1; — shorthand often interpreted as “take available space evenly.” Useful for equal-width columns.
• flex: 0 0 auto; — do not grow, do not shrink, keep intrinsic or declared size.
• flex: 1 1 300px; — start around 300px, but allow growth and shrinkage.
• flex: 0 1 250px; — fixed starting width that can shrink if needed.

Common flexbox layout patterns

Below are the patterns most developers revisit repeatedly.

1. Center content horizontally and vertically

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Use this for empty states, modal content wrappers, or hero sections with a single focal block.

2. Space items across a toolbar or navbar

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

This works well for a logo on the left and actions on the right. If you need more control, place a child group inside another flex container.

3. Equal-width columns

.columns {
  display: flex;
  gap: 1rem;
}

.column {
  flex: 1;
}

This is one of the simplest flexbox layout examples for cards, feature blocks, and dashboard panels.

4. Sidebar plus fluid main content

.layout {
  display: flex;
  gap: 1.5rem;
}

.sidebar {
  flex: 0 0 240px;
}

.main {
  flex: 1;
  min-width: 0;
}

The min-width: 0 on the flexible area is easy to miss, but it often prevents overflow in nested layouts.

5. Wrapping card grid

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 240px;
}

This is useful when you want a lightweight, responsive row of cards without introducing CSS Grid.

6. Push one item to the far edge

.nav {
  display: flex;
  align-items: center;
}

.spacer {
  margin-left: auto;
}

This pattern is common in navigation bars, settings rows, and header actions.

7. Stack items vertically with controlled spacing

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

For forms and component internals, this is often cleaner than adding bottom margins to each child.

8. Bottom-align actions in uneven cards

.card {
  display: flex;
  flex-direction: column;
}

.card-actions {
  margin-top: auto;
}

Useful when card descriptions vary in length and you want buttons to line up visually.

9. Reverse display order with caution

.row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

This can solve visual alignment needs, but avoid using it to hide poor markup structure. Screen reader and keyboard expectations may still follow source order.

10. Single item aligned differently

.container {
  display: flex;
  align-items: center;
}

.item-special {
  align-self: flex-start;
}

Use align-self when one badge, icon, or action needs different cross-axis positioning from its siblings.

If you want another compact syntax reference format, our JavaScript Array Methods Cheat Sheet follows a similar practical style.

Maintenance cycle

The value of a good cheat sheet is not only correctness today, but usefulness over time. Flexbox itself is stable, but the way teams use it shifts as design systems evolve, browser defaults are revisited, and newer layout tools such as Grid change where flexbox fits best.

A practical maintenance cycle for a flexbox reference looks like this:

Monthly or sprint-level review for active projects

• Check whether your most reused patterns still match your component library.
• Look for repeated layout fixes in pull requests. These usually reveal gaps in the cheat sheet.
• Update examples to reflect current naming conventions and preferred spacing utilities.

Quarterly review for shared documentation

• Verify that examples still reflect modern CSS practices, especially use of gap instead of margin-based spacing where appropriate.
• Re-evaluate whether a pattern should stay in flexbox or move to Grid in your docs.
• Confirm that accessibility notes still appear anywhere visual order or alignment tricks might cause confusion.

Annual structural refresh

• Remove examples that no longer solve common problems.
• Add patterns your team reaches for often, such as media object layouts, chip rows, or command bars.
• Reorganize by task instead of property if readers are mostly searching for recipes rather than definitions.

For example, many older references overemphasize vendor-prefix history or legacy spacing workarounds. In a maintained reference, that material can be trimmed so the current guide stays focused on decisions developers make now.

A useful rule is this: update the cheat sheet whenever implementation friction repeats. If multiple developers keep asking when to use flex: 1 versus a fixed basis, that topic deserves a clearer note or example.

Signals that require updates

You do not need to wait for a calendar reminder to improve a flexbox guide. Some signals clearly suggest the reference needs revision.

1. The same bug keeps returning

If layouts regularly overflow, collapse, or wrap in unexpected ways, your documentation may be skipping a detail. Common missing notes include:

• why min-width: 0 matters in flexible children
• when flex-wrap is needed
• how content size interacts with shrinking
• why align-content does nothing on a single line

2. Search intent shifts from syntax to recipes

Readers do not always want a property list. They often want answers like “how do I make equal-height cards” or “how do I push the last button right.” If those are the real entry points, your guide should foreground common flexbox patterns instead of burying them below long definitions.

3. Your design system changes

If components move from handcrafted CSS to utility classes, tokens, or a new naming system, code examples should change too. The underlying flexbox concepts stay the same, but examples should feel familiar to the actual codebase readers maintain.

4. New team members misunderstand axis direction

This is one of the most persistent flexbox learning issues. If people frequently mix up horizontal and vertical alignment, add a clearer axis diagram or a stronger explanation tied to flex-direction.

5. Flexbox is being used where Grid would be clearer

A strong css flexbox guide also defines boundaries. If teams are stretching flexbox into full two-dimensional page layouts, it helps to add a brief note: flexbox is usually best for one-dimensional layout, while Grid is often clearer for rows and columns together.

6. Accessibility reviews surface order problems

If visual reordering is used to solve responsive design issues, the guide should warn against treating order as a structural fix. Visual order and source order are not always the same thing from a usability perspective.

Common issues

This section covers the problems developers most often hit when using flexbox in production. These are the notes that make a reference worth revisiting.

Items overflow instead of shrinking

A flex item may refuse to shrink because of its content, especially with long text, code snippets, or nested elements.

.main {
  flex: 1;
  min-width: 0;
}

Adding min-width: 0 is often the missing fix for overflowing text inside flexible children.

Spacing is inconsistent

If some layouts use child margins and others use container spacing, maintenance becomes harder. Prefer gap on the flex container when possible:

.list {
  display: flex;
  gap: 1rem;
}

This keeps spacing logic in one place and avoids edge-case margin resets.

justify-content and align-items feel reversed

They are not reversed; the axis changed. Check flex-direction first. In column, justify-content works vertically and align-items works horizontally.

align-content appears broken

align-content only affects multiple flex lines. If your container does not wrap into more than one line, it will appear to do nothing.

Equal columns are not actually equal

If one child has more content or a different basis value, widths may drift. Start simple:

.child {
  flex: 1;
}

Then inspect whether padding, borders, content size, or inherited width constraints are affecting the result.

Vertical centering fails because the container has no height

Centering only has visible effect when there is space to center within. If the container collapses to content height, there is nothing to distribute. Make sure the container has a meaningful height or min-height.

Wrapped rows do not align as expected

Remember that wrapped flex rows are still governed by content and available space. If you need strict two-dimensional control, Grid may be a better fit than forcing flexbox into a card matrix.

Using order creates maintenance debt

order can be helpful for small UI adjustments, but overuse makes components harder to reason about. Prefer semantic DOM order and use order sparingly.

Nested flex layouts become hard to debug

This is common in dashboards, forms, and component libraries. A practical approach:

1. Inspect the outermost container first.
2. Identify the main axis on each level.
3. Check width constraints and overflow rules.
4. Add temporary borders or background colors while debugging.
5. Reduce shorthand to explicit properties if behavior is unclear.

In other words, debug one axis and one container at a time.

When to revisit

Come back to this flexbox cheat sheet whenever a layout task starts to feel familiar but fuzzy. The best references are not read once; they are checked in the middle of implementation.

Revisit this topic when:

• you are building a navbar, toolbar, card row, or split pane
• you need to center content without introducing unnecessary wrappers
• you are choosing between flexbox and Grid
• text overflow or shrinking behavior starts acting unexpectedly
• you are documenting patterns for a team or design system
• you notice repeated pull request comments about alignment or spacing

A practical way to keep your own reference current is to maintain a small internal appendix with:

• your team’s preferred layout snippets
• common failure cases from real bugs
• one-line notes on when not to use a pattern
• a short set of copy-paste starter classes

Here is a compact starter block you can keep handy:

/* Container basics */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.row { flex-direction: row; }
.column { flex-direction: column; }
.wrap { flex-wrap: wrap; }
.nowrap { flex-wrap: nowrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-md { gap: 1rem; }

/* Item helpers */
.flex-1 { flex: 1; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: 0 0 auto; }
.self-start { align-self: flex-start; }
.ml-auto { margin-left: auto; }
.min-w-0 { min-width: 0; }

If you are building a larger front-end reference library, pair this article with other quick references so layout, syntax, and utility patterns live in one place. For example, a language-side companion like the JavaScript Array Methods Cheat Sheet: Syntax, Examples, and When to Use Each can help keep your team’s UI and data transformation notes equally accessible.

Final rule of thumb: use flexbox for one-dimensional alignment and distribution, keep examples grounded in real interface patterns, and update the reference whenever your team starts solving the same layout problem twice. That is what turns a generic css flexbox cheat sheet into a genuinely reusable developer resource.