Question 1

What problem does flexbox solve?

Accepted Answer

One-dimensional distribution of space and alignment among items in a row or column. Great for toolbars, navs, card footers. Use grid for two-dimensional layout.

Question 2

main axis vs cross axis?

Accepted Answer

main follows flex-direction; cross is perpendicular. justify-* vs align-* map accordingly. row → main horizontal; column → main vertical. Wrapping adds multi-line cross behavior.

Question 3

Explain flex-grow, flex-shrink, and flex-basis.

Accepted Answer

grow distributes free space; shrink reduces when overflowing; basis is starting size before free space. flex: 1 is commonly 1 1 0% or 1 1 0 depending on browser defaults of the shorthand — know your shorthand.

Question 4

Why does min-width: auto cause flex overflow?

Accepted Answer

Default min-size is content-based, preventing shrinking below content; set min-width:0 to allow. Classic truncation bug with text in flex children. Also min-height:0 in column flex.

Question 5

align-items vs align-content vs align-self?

Accepted Answer

items aligns each item on cross axis; content packs flex lines when wrapped; self overrides per item. align-content only matters with multi-line flex containers.

Question 6

How does flex-wrap change layout?

Accepted Answer

Allows items onto new lines when they don't fit; enables align-content. Wrapped flex is still 1D per line, not a full 2D grid.

Question 7

gap in flexbox — why prefer it over margins?

Accepted Answer

gap spaces items without end margins collapsing/doubling hacks. Cleaner responsive stacks. Watch older browser support if relevant.

Question 8

How do you build a sticky footer with flex?

Accepted Answer

Column flex on min-height 100%; main { flex: 1 } pushes footer down. Also achievable with grid. Avoid body margin collapse issues.

Question 9

order property — uses and a11y concerns?

Accepted Answer

Visual reorder without changing DOM; can break keyboard/AT reading order. Prefer DOM order matching visual order. Use order sparingly.

Question 10

flex shorthand pitfalls?

Accepted Answer

flex: auto vs none vs 1 change basis/grow/shrink dramatically. Read the expanded values. Debugging: look at computed flex-* in DevTools.

Question 11

When is flex better than float-based layouts?

Accepted Answer

Almost always for modern 1D alignment — fewer clearfix hacks, better distribution. Floats remain for text wrapping around images, not page layout.

Question 12

Responsive nav with flex — approach?

Accepted Answer

Space-between for logo/links; wrap or collapse to menu; align-items center. Use media queries or container queries for hamburger switch. Keep focus order sensible.

Question 13

Design flex utilities for a design system.

Accepted Answer

Document direction, wrap, justify, align, grow, gap tokens; warn about min-width:0. Provide recipes for common patterns to avoid one-off CSS.

Flexbox CSS Interview Questions

Other CSS interview topics