Tags: code
Overview
| Feature | Float | Flexbox | Grid |
|---|---|---|---|
| Purpose | Originally for text wrapping | One-dimensional layout | Two-dimensional layout |
| Main Use | Text/image wrapping, old layouts | Aligning and distributing items in a line or column | Complex page layouts with rows and columns |
| Direction | N/A | Single axis (row or column) | Both axes (rows and columns) |
Layout Control
| Feature | Float | Flexbox | Grid |
|---|---|---|---|
| Layout axis | N/A | One (row/column) | Two (row + column) |
| Item ordering | Hard to manage | order property |
order or placement |
| Alignment (centering) | Hard | Easy
(with justify-content, align-items) |
Easy (with justify-content, align-items,
etc.) |
| Equal spacing | Manual | Built-in (gap, space-between, etc.) |
Built-in |
| Nesting required | Often | Sometimes | Rarely (more powerful) |
Responsiveness
| Feature | Float | Flexbox | Grid |
|---|---|---|---|
| Responsive support | Limited | Good | Excellent |
| Reordering content visually | Hard | Easy | Easy |
| Media query support | Required | Optional | Optional |