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