Beginner: Flexbox
beginner: flexbox flexbox — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,
Introduction
Flexbox — 25 interview questions with traps, follow-ups, and production context. Practice out loud; staff loops reward trade-offs, not definitions.
Business problem
Business pressure: Product teams need Flexbox interview questions to ship polished UI without layout regressions, accessibility lawsuits, or LCP regressions that hurt conversion.
- Conversion: Visual polish and performance directly affect checkout and signup funnels.
- Brand: Inconsistent Flexbox interview questions implementation fragments design system trust.
- Velocity: CSS debt slows every feature team — architecture matters at scale.
Why this feature exists
Platform history: CSS evolved Flexbox interview questions to solve author needs without JavaScript layout engines or table hacks.
- Problem solved: Declarative styling separated from document structure.
- Rejected alternative: Inline styles and JS layout — unmaintainable at enterprise scale.
Browser rendering perspective
Rendering impact: Flexbox interview questions affects style recalculation, layout, paint, and composite stages in the browser pipeline.
- Chrome (Blink): Style → LayoutNG → Paint → Viz compositor.
- Firefox (Gecko): Servo-based stylo + WebRender compositing.
- Safari (WebKit): WebKit style resolver + GPU layer promotion rules.
Internal browser workflow
Workflow: Selector match → cascade → computed values → layout tree → paint layers → composite.
Real production example
Production: Netflix, Amazon, and Shopify enforce Flexbox interview questions patterns via design tokens, lint rules, and visual regression CI.
Enterprise use case
Enterprise: Design systems (Polaris, Carbon, Atlassian) codify Flexbox interview questions in token pipelines and component APIs.
Accessibility considerations
A11y: CSS must not remove focus visibility, break zoom, or convey state by color alone (WCAG 2.2).
Performance considerations
Performance: Flexbox interview questions can trigger reflow, expensive selectors, or layer explosion — profile with DevTools Performance panel.
SEO considerations
SEO: CSS affects LCP, CLS, and mobile usability — ranking signals tied to Core Web Vitals.
Scalability considerations
Scale: Flexbox interview questions choices compound across micro-frontends, white-label tenants, and dark-mode variants.
Common production issues
Production failures: Specificity wars, z-index stacks, and responsive breakpoints that work in Chrome but break Safari.
Debugging guide
Debug: Chrome DevTools → Elements (computed styles), Layout panel, Rendering layers, Coverage for unused CSS.
Interview questions
What problem does flexbox solve?(Beginner)
One-dimensional distribution of space along main axis — nav bars, centering, equal columns.
Follow-up: When use grid instead?
What is flex container vs item?(Beginner)
display:flex on parent; children become flex items automatically.
Follow-up: Can a flex item be a grid?
What is flex-direction?(Beginner)
row (default) or column — sets main axis.
Follow-up: column-reverse a11y?
What is flex-wrap?(Beginner)
nowrap default — items shrink; wrap moves to new line.
Follow-up: nowrap overflow issue?
What is flex-grow?(Beginner)
Proportion of free space absorbed — 0 default.
Follow-up: grow 1 vs grow 2?
What is flex-shrink?(Beginner)
How items shrink below flex-basis — 1 default.
Follow-up: flex-shrink 0 use case?
What is flex-basis?(Beginner)
Initial size before grow/shrink — auto uses content size.
Follow-up: basis 0 vs auto?
What is align-self?(Beginner)
Per-item cross-axis override of align-items.
Follow-up: align-self flex-end?
What is gap in flexbox?(Beginner)
Spacing between items — modern replacement for margin hacks.
Follow-up: gap browser support?
What is justify-content: center?(Beginner)
Centers items on main axis — classic horizontal centering in row.
Follow-up: Center unknown width?
What is align-items: center?(Beginner)
Centers on cross axis — vertical center in row flex.
Follow-up: Holy grail with flex?
What is flex: 0 0 auto?(Beginner)
Don't grow or shrink — fixed size item.
Follow-up: Sidebar fixed + main flex 1?
What is margin-left auto in flex?(Beginner)
Pushes item to end — ml-auto pattern for nav logo left menu right.
Follow-up: auto margins in flex?
What is min-width 0 on flex child?(Beginner)
Allows text truncation/shrink — default min-width:auto blocks ellipsis.
Follow-up: Ellipsis in flex child fix?
What is flex-flow shorthand?(Beginner)
flex-direction + flex-wrap.
Follow-up: flex-flow column wrap?
What is align-content?(Beginner)
Cross-axis spacing when multiple lines wrapped.
Follow-up: align-content vs align-items?
What is row-gap column-gap?(Beginner)
Longhands for gap.
Follow-up: gap vs padding on container?
What is flex nested layout?(Beginner)
Flex inside flex common — watch min-height chains.
Follow-up: Column flex full height?
What is space-between?(Beginner)
First/last at edges — trap: single item looks odd.
Follow-up: space-evenly vs between?
What is flex and overflow?(Beginner)
Container needs min-height 0 to allow child scroll in column flex apps.
Follow-up: Scrollable main in app shell?
What is flex-basis 100% wrap trick?(Beginner)
Force line break in flex for responsive patterns — hacky; grid often cleaner.
Follow-up: Better grid alternative?
What is display inline-flex?(Beginner)
Flex container inline-level — buttons in text flow.
Follow-up: inline-flex vs flex?
What is flex and absolute children?(Beginner)
Absolute children removed from flex flow.
Follow-up: Overlay in flex container?
What is flex equal height columns?(Beginner)
align-items: stretch default — equal height columns.
Follow-up: Stretch vs equal content?
What is flexbox browser quirks?(Beginner)
Safari gap bugs mostly fixed; test iOS old versions for wrap.
Follow-up: Flexbug knowledge needed?
Hands-on exercise
Mock interview drill: Answer all 25 questions out loud in 45 minutes. Record yourself explaining trade-offs, not just definitions.
Try it yourself
Edit the CSS panel — the preview updates live. Use DevTools Performance and Accessibility panels to validate.