У чому перевага Flexbox перед float-версткою?
Перевага Flexbox у тому, що він спочатку створений для розкладки, тоді як float - лише хак, спочатку призначений для обтікання тексту. Тому Flexbox дає значно більше контролю і спрощує верстку.
Головні відмінності
| Що потрібно зробити | Float-верстка | Flexbox |
|---|---|---|
| Вирівнювання по центру | складно, потрібні милиці | одна властивість (justify-content/align-items) |
| Однакові колонки | доводиться рахувати ширини, використовувати хаки | автоматично, елементи самі розподіляються |
| Вертикальне вирівнювання | майже завжди милиці | робиться одразу з коробки |
| Керування порядком елементів | тільки зміна HTML | властивість order без зміни розмітки |
| Адаптивність | проблемна, вручну | вбудована гнучкість |
| Керування проміжками | margin-хаки | gap без милиць |
Чому float гірший
floatламає потік і вимагаєclear, обгорток і «clearfix»- спочатку призначений не для розкладки, а для обтікання зображень
- майже немає засобів для вирівнювання й адаптивної поведінки
Чому Flexbox кращий
- нормальна сучасна розкладка
- працює по одній осі (горизонталь або вертикаль)
- легко керує вирівнюванням, перенесеннями, розміром, порядком і проміжками
Висновок: Flexbox зручніший, чистіший і потужніший для побудови макетів, замінюючи застарілі хаки з float.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.