CSS Flexbox Cheatsheet for Interviews — Main Axis, Cross Axis, and Common Layouts

A CSS flexbox cheatsheet for interviews should do more than recite display: flex. Interviewers want to know whether you understand the main axis, cross axis, sizing rules, wrapping behavior, and how to build common layouts without trial-and-error. Flexbox is a one-dimensional layout system: it distributes items along one primary direction while aligning them along the perpendicular direction. If you can explain that clearly, most flexbox interview questions become predictable.

CSS flexbox interview cheatsheet: the core mental model

Flexbox starts with a container and direct children. The container becomes a flex formatting context with display: flex or display: inline-flex. Its direct children become flex items. The entire system is controlled by two axes:

• Main axis: The direction flex items flow. It is horizontal by default because flex-direction: row is the default.
• Cross axis: The perpendicular direction. If the main axis is horizontal, the cross axis is vertical. If the main axis is vertical, the cross axis is horizontal.

That axis model is the difference between memorizing properties and actually using them. justify-content aligns along the main axis. align-items aligns along the cross axis. Change flex-direction, and those properties still target the same conceptual axes, not the same physical screen direction.

A good interview explanation: "I first identify the main axis from flex-direction, then use justify-content for distribution along that axis and align-items for alignment perpendicular to it."

Container properties you should know cold

| Property | What it controls | Common values | Interview note | |---|---|---|---| | display | Enables flex layout | flex, inline-flex | Only direct children become flex items | | flex-direction | Main axis direction | row, row-reverse, column, column-reverse | Reversing affects visual order, not DOM order | | justify-content | Main-axis distribution | flex-start, center, space-between, space-around, space-evenly | Works after flex item sizes are resolved | | align-items | Cross-axis alignment for all items | stretch, center, flex-start, flex-end, baseline | Default is stretch when height/width is auto | | align-self | Cross-axis alignment for one item | same as align-items | Item-level override | | flex-wrap | Whether items wrap | nowrap, wrap, wrap-reverse | Default nowrap often causes overflow | | align-content | Cross-axis distribution of multiple lines | center, space-between, stretch | Does nothing with a single flex line | | gap | Space between items | gap: 16px | Cleaner than margins for most flex layouts |

In interviews, say the default values out loud when debugging: flex-direction: row, justify-content: flex-start, align-items: stretch, flex-wrap: nowrap. Many layout bugs are just forgotten defaults.

Item sizing: flex-grow, flex-shrink, and flex-basis

The shorthand flex is where many candidates get fuzzy. It controls how an item sizes itself along the main axis.

• flex-grow: how much the item grows when there is extra main-axis space.
• flex-shrink: how much the item shrinks when there is not enough main-axis space.
• flex-basis: the item's starting size before free space is distributed.

flex: 1 is commonly interpreted by browsers as flex: 1 1 0%. That means all items start from zero basis and share available space equally. flex: 0 0 auto means do not grow, do not shrink, and use intrinsic or declared size. flex: 1 1 auto means start from content or declared size, then grow and shrink.

Common pattern:

.sidebar {
  flex: 0 0 280px;
}

.content {
  flex: 1 1 auto;
  min-width: 0;
}

The min-width: 0 detail is an advanced interview point. Flex items have min-width: auto by default, which can prevent long text or large content from shrinking. If a flexible content area overflows next to a sidebar, adding min-width: 0 often fixes it.

Common layout: center an element both ways

The classic interview question is "How do you center a div?" With flexbox:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Why it works: default flex-direction: row makes the main axis horizontal, so justify-content: center centers horizontally. The cross axis is vertical, so align-items: center centers vertically. If flex-direction: column, those interpretations flip.

Do not forget the parent needs available height for vertical centering. If the parent has no meaningful height, there is nothing to center within.

Common layout: responsive navbar

A simple nav has a logo on the left and links on the right:

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

The parent uses space-between to separate logo and link group. The link group is its own flex container so links can align and wrap independently. In an interview, mention that nesting flex containers is normal. Flexbox is one-dimensional, so complex two-axis page layouts often combine flex containers or use grid for the outer structure.

Common layout: cards that wrap cleanly

A card row that wraps and keeps a reasonable minimum width:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 260px;
}

flex: 1 1 260px says each card starts at 260px, may grow to fill a row, and may shrink if necessary. flex-wrap: wrap lets items move onto new lines. This is a good flexbox answer for simple card layouts. If the interviewer asks for exact columns and two-dimensional control, recommend CSS Grid instead.

Common layout: sticky footer with flex column

A page with a footer at the bottom when content is short:

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

Here the main axis is vertical because flex-direction: column. main { flex: 1; } expands to fill remaining vertical space, pushing the footer down. This example is useful because it proves you understand axis flipping, not just horizontal nav bars.

Flexbox vs grid in interviews

A clean answer distinguishes the tools:

• Use flexbox for one-dimensional distribution: nav bars, button groups, centered modals, media objects, equal-width children, form rows, sticky footers.
• Use grid for two-dimensional layout: dashboards, page shells, image galleries with fixed rows and columns, layouts where row and column relationships both matter.

If asked to build a full dashboard, a strong answer might be: "I would use grid for the page regions and flexbox inside each region for alignment of controls." That is more realistic than forcing flexbox everywhere.

Interview traps that catch people

Trap: thinking justify-content always means horizontal. It means main axis. With flex-direction: column, it controls vertical distribution.

Trap: using align-content on a single line. align-content only affects distribution between multiple flex lines when wrapping creates more than one line. For a single row, use align-items.

Trap: forgetting direct children only. Flex properties apply to direct flex items, not grandchildren. If a nested element is not aligning, its parent may need to be a flex container too.

Trap: expecting width to always win. Flex sizing can grow or shrink items from their width or basis. Use flex: 0 0 200px when you truly want a fixed main-axis size.

Trap: causing accessibility issues with order. The order property changes visual order, not DOM or keyboard reading order. Use it carefully and do not rely on it for meaningful content sequence.

Trap: margins everywhere instead of gap. gap is cleaner for spacing between flex items and avoids edge-margin hacks.

Debug recipe for flexbox questions

When a layout does not behave, use this sequence:

1. Confirm the element you are styling is the flex container and the elements you expect are direct children.
2. Identify flex-direction; label main and cross axes.
3. Check whether you need main-axis distribution (justify-content) or cross-axis alignment (align-items / align-self).
4. Inspect item sizing: flex-basis, flex-grow, flex-shrink, declared width/height, and min-width.
5. Decide whether wrapping is allowed with flex-wrap.
6. Replace margin hacks with gap where possible.
7. If you need exact rows and columns, switch to grid instead of fighting flexbox.

This sequence makes you sound like someone who debugs layouts systematically.

How to explain flexbox in a frontend interview

A polished answer is short:

"Flexbox is a one-dimensional layout model for distributing space among direct children of a container. I start by determining the main axis from flex-direction. justify-content distributes items along that main axis, while align-items aligns them across the cross axis. For sizing, flex-grow, flex-shrink, and flex-basis determine how items use available space. I use it for nav bars, centering, button groups, card rows, and sticky footers, and I switch to grid when I need two-dimensional layout control."

Then be ready to code one layout. Interviewers often care more about whether your mental model produces working CSS than whether you can recite every property.

Prep checklist

Before a frontend interview, make sure you can do these without searching:

• Center an item horizontally and vertically.
• Build a navbar with left/right sections.
• Build wrapping cards with flex-wrap and gap.
• Explain main axis vs cross axis when flex-direction changes.
• Explain flex: 1, flex: 0 0 auto, and flex: 1 1 260px.
• Fix overflow with min-width: 0 on a flex child.
• Explain why align-content is not working on a single row.
• Say when CSS Grid is the better tool.

Flexbox interviews reward a simple mental model applied consistently. Identify the axis, choose the alignment property, control item sizing, and avoid the common traps around wrapping, intrinsic sizes, and DOM order.

Whiteboard prompts to practice

Practice flexbox by turning common interview prompts into a few explicit choices rather than memorized snippets.

Prompt: Build a media object with an avatar and flexible text. Use a row container, gap, a fixed avatar, and a text block with min-width: 0 so long names or URLs truncate instead of pushing the avatar off screen.

.media { display: flex; align-items: flex-start; gap: 12px; }
.avatar { flex: 0 0 48px; }
.media-body { flex: 1 1 auto; min-width: 0; }

Prompt: Put two buttons on the right side of a form row. Make the row a flex container, let the label or spacer grow, then keep the buttons intrinsic.

.form-row { display: flex; align-items: center; gap: 12px; }
.form-row .spacer { flex: 1; }
.form-row button { flex: 0 0 auto; }

Prompt: Make equal-height cards. Flex items in the same row stretch by default when align-items: stretch, but content inside each card may still need a column layout. A common solution is to make each card display: flex; flex-direction: column; and let the description grow, pushing the CTA to the bottom.

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

Being able to adapt these small patterns is more valuable than remembering one perfect code block. In a live interview, say what each property is doing: which element is the container, what the main axis is, which child is allowed to grow, and what should stay fixed.

Related guides

• CSS Grid Cheatsheet for Interviews — Template Areas, fr Units, and Responsive Layouts — A practical CSS Grid interview cheatsheet covering template areas, fr units, auto-fit/minmax, alignment, responsive layouts, common questions, and layout pitfalls.
• API Design Interview Cheatsheet in 2026 — Patterns, Examples, Practice Plan, and Common Traps — A practical API design interview cheatsheet for 2026: how to scope the problem, choose REST/GraphQL/gRPC patterns, model resources, handle auth, versioning, rate limits, and avoid the traps that cost senior candidates offers.
• AWS Interview Cheatsheet in 2026 — Patterns, Examples, Practice Plan, and Common Traps — A high-signal AWS interview cheatsheet for 2026 covering architecture patterns, IAM, networking, reliability, cost, debugging, and the answers that show real cloud judgment.
• Backend System Design Interview Cheatsheet in 2026 — Patterns, Examples, Practice Plan, and Common Traps — A backend System Design interview cheatsheet for 2026 with the core flow, architecture patterns, capacity heuristics, reliability tradeoffs, and traps that separate senior answers from vague box drawing.
• Big-O Complexity Cheatsheet for Coding Interviews 2026 — A no-fluff Big-O reference card covering every complexity class, data structure, and algorithm pattern you'll face in coding interviews.