25+ Flexbox Interview Questions 2026: Answers, Examples & Visuals

Flexbox interview questions are popular because Flexbox sits inside almost every modern UI: navbars, cards, forms, toolbars, modals, button groups, and centered empty states. Interviewers are not just checking whether you know display: flex; they want to know whether you understand axes, alignment, flexible sizing, wrapping, and the bugs that appear in production layouts.

This guide focuses on the Flexbox questions that candidates actually get asked: how to center elements, how justify-content differs from align-items, what flex: 1 really means, when Flexbox is better than Grid, and how to debug overflow, wrapping, and ordering issues.

Table of Contents

1. How to Answer Flexbox Interview Questions
2. Flexbox Fundamentals
3. Alignment and Centering Questions
4. Flex Sizing Questions
5. Wrapping and Responsive Layout Questions
6. Practical UI Pattern Questions
7. Advanced and Debugging Questions
8. Quick Reference

How to Answer Flexbox Interview Questions

A strong Flexbox interview answer usually has three parts:

1. Identify the axis. Say whether the layout is row-based or column-based.
2. Choose the alignment or sizing property. Use justify-content for the main axis, align-items for the cross axis, and flex properties when items should grow or shrink.
3. Mention the practical constraint. For example, vertical centering needs height, wrapping needs flex-wrap, and long content often needs min-width: 0.

For example, if asked how to center an element:

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

Then explain: justify-content centers on the main axis, align-items centers on the cross axis, and min-height gives the container vertical space.

Flexbox Fundamentals

1. What is Flexbox?

Flexbox is a CSS layout model for arranging items in one direction at a time: either a row or a column. It is designed for distributing space, aligning items, and handling dynamic content sizes.

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

Use Flexbox when you want items to line up, share space, center, wrap, or push apart inside a component.

2. What is a flex container and a flex item?

A flex container is an element with display: flex or display: inline-flex. Its direct children become flex items.

<nav class="nav">
  <a>Docs</a>
  <a>Pricing</a>
  <button>Sign in</button>
</nav>

.nav {
  display: flex;
}

Only direct children become flex items. Elements nested inside those children are not flex items unless their own parent also uses Flexbox.

3. What are the main axis and cross axis?

The main axis is the direction flex items flow. The cross axis is perpendicular to it.

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

4. What does flex-direction do?

flex-direction controls the main axis.

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

Common values:

In interviews, mention that changing flex-direction changes what justify-content and align-items affect.

5. What is the difference between Flexbox and CSS Grid?

Flexbox is one-dimensional. It lays out items in a row or a column. CSS Grid is two-dimensional. It controls rows and columns together.

Use Flexbox for component internals: navbars, card content, toolbars, button groups, centering, and distributing items along one axis.

Use Grid for larger structures: page shells, dashboards, image galleries, pricing tables, and layouts where columns and rows must align together.

An interview-friendly summary:

Flexbox is content-driven and one-dimensional. Grid is layout-driven and two-dimensional.

Alignment and Centering Questions

6. How do you center an element with Flexbox?

Use justify-content: center and align-items: center on the parent.

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

justify-content centers along the main axis. align-items centers along the cross axis. The parent needs height for vertical centering to be visible.

7. What is the difference between justify-content and align-items?

justify-content aligns flex items along the main axis. align-items aligns flex items along the cross axis.

.row {
  display: flex;
  flex-direction: row;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
}
 
.column {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical */
  align-items: center;     /* horizontal */
}

This is one of the most important Flexbox interview questions because it proves you understand axes rather than memorizing property names.

8. What are common justify-content values?

justify-content controls distribution along the main axis.

.nav {
  display: flex;
  justify-content: space-between;
}

Common values:

9. What are common align-items values?

align-items controls how items align on the cross axis.

.cards {
  display: flex;
  align-items: stretch;
}

Common values:

10. What is align-self?

align-self overrides align-items for a single flex item.

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

Use it when one item needs different cross-axis alignment from the rest of the group.

11. What is the difference between align-items and align-content?

align-items aligns items within a flex line. align-content distributes multiple flex lines along the cross axis.

align-content only has an effect when:

• The container uses flex-wrap: wrap
• There are multiple flex lines
• The container has extra cross-axis space

.tags {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  min-height: 240px;
}

If there is only one line, align-content will appear to do nothing.

12. How does gap work in Flexbox?

gap adds space between flex items without adding space around the outside edges.

.actions {
  display: flex;
  gap: 0.75rem;
}

This is cleaner than margins because you do not need to remove the last item's margin or worry about doubled spacing.

Flex Sizing Questions

13. What does flex: 1 mean?

flex: 1 is shorthand for:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

It means the item can grow, can shrink, and starts from a zero basis before available space is distributed.

When multiple items have flex: 1, they share available space equally.

14. What are flex-grow, flex-shrink, and flex-basis?

These three properties control flexible sizing.

.sidebar {
  flex: 0 0 260px;
}
 
.main {
  flex: 1 1 auto;
}

The sidebar stays at 260px. The main area takes the remaining space and can shrink if needed.

15. What is the difference between flex-basis and width?

flex-basis is the initial size of a flex item along the main axis. width is a physical horizontal size.

In a row layout, flex-basis behaves much like width. In a column layout, flex-basis affects height because the main axis is vertical.

.item {
  flex-basis: 12rem;
}

In interviews, say that flex-basis participates directly in the flex sizing algorithm, while width is a normal CSS size that may be overridden by flex behavior.

16. What is the difference between flex: auto, flex: none, and flex: 1?

These shorthands are common in real code.

flex: initial; /* 0 1 auto */
flex: auto;    /* 1 1 auto */
flex: none;    /* 0 0 auto */
flex: 1;       /* 1 1 0% */

17. How do you make one item fill the remaining space?

Give the flexible item flex: 1.

.layout {
  display: flex;
}
 
.sidebar {
  flex: 0 0 280px;
}
 
.content {
  flex: 1;
  min-width: 0;
}

min-width: 0 is important when the content may contain long text, tables, code, or URLs.

18. How do you create equal width columns with Flexbox?

Use flex: 1 on each item.

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

This works well when each column should share available space equally. For more precise row-and-column alignment across multiple rows, CSS Grid is usually a better choice.

Wrapping and Responsive Layout Questions

19. What does flex-wrap do?

By default, flex items stay on one line and may shrink to fit. flex-wrap: wrap allows items to move onto new lines.

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

This is common for tags, chips, filter controls, button groups, and responsive rows.

20. How do you build a responsive navbar with Flexbox?

Flexbox is a natural fit for navbars because navigation is usually one-dimensional.

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
 
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
 
@media (max-width: 720px) {
  .nav-links {
    display: none;
  }
}

This keeps the brand and action areas aligned while allowing the link list to collapse on smaller screens.

21. How do you make a row of cards wrap responsively?

Use flex-wrap and give each card a flexible basis.

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

Each card starts at 260px, can grow when space is available, and wraps when the row becomes too narrow.

If you need strict column alignment across rows, prefer CSS Grid:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

22. How do you create a layout that switches from row to column on mobile?

Change flex-direction in a media query.

.media {
  display: flex;
  gap: 1rem;
}
 
@media (max-width: 640px) {
  .media {
    flex-direction: column;
  }
}

This pattern is common for media objects, feature rows, and split panels.

Practical UI Pattern Questions

23. How do you create a card with the footer always at the bottom?

Use a column flex layout and let the content area grow.

.card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
 
.card-content {
  flex: 1;
}

The content area expands and pushes the footer to the bottom.

24. How do you create equal height columns?

Flex items stretch on the cross axis by default, so equal height columns often happen automatically.

.row {
  display: flex;
  gap: 1rem;
}
 
.column {
  flex: 1;
}

The default align-items: stretch makes each item match the height of the flex line. If you set align-items: flex-start, you lose that equal-height behavior.

25. How do you push one flex item to the far right?

Use margin-left: auto on the item you want to push.

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
 
.login {
  margin-left: auto;
}

Auto margins absorb available space in the main axis. This is often cleaner than inserting spacer elements.

26. How do you build a media object with Flexbox?

A media object has an image or icon on one side and content on the other.

.media {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
 
.media-body {
  flex: 1;
  min-width: 0;
}

Use min-width: 0 when the text area may contain long content that should shrink instead of forcing overflow.

Advanced and Debugging Questions

27. Why does a flex item overflow its container?

Flex items have an automatic minimum size based on their content. Long words, URLs, tables, and code blocks can prevent the item from shrinking.

Fix it with min-width: 0 on the flex item:

.content {
  flex: 1;
  min-width: 0;
}
 
.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

28. What does the order property do, and what is the accessibility risk?

order changes the visual order of flex items.

.featured {
  order: -1;
}

The accessibility risk is that visual order can differ from DOM order. Keyboard navigation, screen readers, and copy-paste generally follow source order, not visual order. Use order for small visual adjustments, but keep the HTML order logical.

29. What is the difference between display: flex and display: inline-flex?

Both create a flex formatting context for their children. The difference is how the container itself behaves.

Use inline-flex for badges, buttons, pills, and compact inline controls.

30. Is Flexbox good for full page layouts?

It can work, but CSS Grid is often better for page-level layouts because Grid controls rows and columns together.

Flexbox is excellent for one-dimensional component layouts:

• Navigation bars
• Toolbars
• Cards
• Button groups
• Media objects
• Centered empty states

For full page shells, dashboards, and complex galleries, reach for Grid first, then use Flexbox inside each area.

31. What common Flexbox bugs should you know?

32. What is a strong interview answer for Flexbox?

A strong answer connects the CSS to the layout reasoning:

"I would use Flexbox because this is a one-dimensional component layout. The container defines the main axis with flex-direction. I would use justify-content to distribute items on that axis and align-items for the cross axis. If one item needs to fill the remaining space, I would use flex: 1, and if it contains long text I would add min-width: 0 to avoid overflow."

That answer shows syntax, mental model, and debugging awareness.

Quick Reference

Practice Exercise

Before the interview, practice explaining this navigation layout:

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
 
.nav-links {
  display: flex;
  gap: 1.25rem;
}
 
.nav-actions {
  margin-left: auto;
  display: flex;
  gap: 0.75rem;
}

A good explanation:

"The navbar is one-dimensional, so Flexbox is a good fit. align-items: center aligns items vertically, gap handles spacing, and margin-left: auto pushes the actions to the far right by absorbing available main-axis space."

Related Articles

• CSS Flexbox & Grid Interview Guide - broader comparison of Flexbox and Grid interview patterns
• CSS Grid Interview Questions - focused guide to Grid questions, examples, and layout diagrams
• Complete Frontend Developer Interview Guide - full frontend interview roadmap
• HTML5 Accessibility Interview Guide - semantic HTML, ARIA, keyboard access, and accessibility questions