Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Flexbox vs Float vs Inline-block
Before Flexbox, developers used floats and inline-block for layouts. Understanding why Flexbox replaced them helps you appreciate its power and helps you work with legacy codebases.
Layout Method Comparison
- Float - Originally for text wrapping around images. Abused for layouts. Requires clearfix hacks. Fragile and unpredictable
- Inline-block - Elements sit side by side but have mysterious whitespace gaps between them. Can't equal-height easily
- Flexbox - Purpose-built for layout. Equal heights, centering, spacing, ordering - all solved cleanly
- When to still use float - Only for wrapping text around images (its original purpose). Never for layouts
- Flexbox vertical centering - align-items: center. With float/inline-block, vertical centering required hacky tricks
- Flexbox equal heights - Automatic. Float and inline-block require JavaScript or table hacks
- Modern standard - Use Flexbox for one-dimensional layouts, Grid for two-dimensional. Floats and inline-block are legacy
Comparison Code
/* ❌ OLD: Float layout (don't use for layouts!) */
.old-column {
float: left;
width: 33.33%;
/* Requires clearfix hack on parent */
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
/* ❌ OLD: Inline-block (has whitespace issues) */
.ib-column {
display: inline-block;
width: 33.33%;
/* Whitespace between HTML tags creates gaps! */
vertical-align: top; /* Required or bottoms misalign */
}
/* ✅ MODERN: Flexbox (clean and predictable) */
.flex-columns {
display: flex;
gap: 20px;
}
.flex-columns > * {
flex: 1;
/* Equal height, equal width, centered - done! */
}Tip
When working with legacy codebases that use floats, you can safely replace them with Flexbox - Flexbox is supported in 99%+ of browsers. The only time to use float today is for wrapping text around an image, its original purpose: img { float: left; margin-right: 16px; }.
Display determines an element's rendering behavior
Common Mistake
Using inline-block for card grids and struggling with mysterious 4px gaps between items. These gaps come from whitespace between HTML tags. Flexbox eliminates this entirely - there are no whitespace gaps in flex layouts. Always prefer Flexbox over inline-block for any layout work.
Practice Task
Refactor a float-based layout to Flexbox: (1) Take a 3-column layout using float: left; width: 33%, (2) Remove the float and clearfix, (3) Replace with display: flex; gap: 20px on the parent and flex: 1 on each column. Compare the code length and reliability.
Quick Quiz
Key Takeaways
- Before Flexbox, developers used floats and inline-block for layouts.
- Float - Originally for text wrapping around images. Abused for layouts. Requires clearfix hacks. Fragile and unpredictable
- Inline-block - Elements sit side by side but have mysterious whitespace gaps between them. Can't equal-height easily
- Flexbox - Purpose-built for layout. Equal heights, centering, spacing, ordering - all solved cleanly