Flexbox provides a modern approach to layout compared to traditional float-based methods. It is designed for one-dimensional layouts and simplifies alignment, spacing, and responsive design.

Key Differences

1
Alignment: Flexbox offers properties like justify-content, align-items, and align-self for easy alignment along main and cross axes, whereas floats require manual margin or positioning adjustments.
2
Flow: Float-based layouts remove elements from normal flow, often requiring clearfix hacks; Flexbox keeps items in flow and distributes space dynamically.
3
Responsiveness: Flexbox can grow or shrink items automatically using flex-grow and flex-shrink, making responsive designs simpler.
4
Ordering: Flexbox allows reordering of elements using the order property without changing HTML structure.
5
Spacing: Flexbox supports the gap property for consistent spacing, eliminating the need for margin tweaks used with floats.

Example: Flexbox vs Float

In this example, Flexbox automatically distributes space and aligns items evenly, whereas the float layout requires fixed widths and clearfix to maintain proper alignment.

Difficulty: 6/10

Topics: Flexbox alignment, Float layout limitations, Responsive layout patterns

Scenario Questions

0-2 years experience

1
How would you center a button vertically and horizontally inside a header using flexbox, and what would happen if you tried to do the same with floats?
2
What happens if you set width: 100% on a floated item versus a flex item inside a container with padding?
3
You have three divs side by side — one is taller than the others. How do you make them all the same height using flexbox, and why won’t floats do that easily?

2-5 years experience

1
A responsive navigation bar breaks on mobile — the links stack vertically but overflow the container. You switched from floats to flexbox, but it’s still broken. What’s likely wrong and how would you fix it?
2
Your team’s legacy component uses floats for a card grid. You’re refactoring to flexbox, but the layout shifts unexpectedly on older browsers. What tradeoffs do you consider before pushing the change?
3
A product page has a sidebar and main content area. With floats, the sidebar sometimes collapses under the main content on narrow screens. How would you redesign this with flexbox, and what edge cases might still break?

5-8 years experience

1
You’re designing a dynamic dashboard with draggable, resizable widgets. Flexbox handles initial layout well, but performance degrades during drag. What alternatives would you evaluate, and why might flexbox be the wrong tool at scale?
2
A component library uses flexbox for all layouts, but accessibility audits show screen readers struggle with reordered content. How do you balance visual flexibility with semantic order, and when would you fall back to CSS Grid or floats?
3
Your team inherited a 10-year-old CSS codebase with hundreds of float-based layouts. You want to migrate to flexbox. What’s your phased approach, and how do you prioritize components without breaking production?

8+ years experience

1
You’re leading a cross-team initiative to modernize the company’s UI framework. Legacy components rely on floats for compatibility with IE11. How do you architect a migration strategy that balances technical debt, release velocity, and stakeholder buy-in?
2
A global product uses CSS layouts that vary by region due to RTL language support. Floats handled this with direction-specific overrides, but flexbox doesn’t. How do you design a scalable, maintainable layout system that supports both LTR and RTL without duplicating logic?
3
Your company is moving to a design system with atomic CSS. Flexbox is used everywhere, but bundle size is growing. Do you keep flexbox, switch to CSS Grid, or build a custom layout engine? What metrics and long-term maintenance costs inform your decision?

Follow-up Questions

❓What happens if you mix flexbox and floats in the same container?
❓How would you debug a flex item that won’t shrink as expected?
❓Why might a legacy team still use floats instead of flexbox?