Оригінал: quackit.com/css/flexbox/tutorial/
Переклад: Влад Мержевич
Флексбокси (Flexbox, від flexible box — гнучкі блоки) дають веб-розробникам контроль за розташуванням елементів, їх вирівнюванням та розмірами всередині контейнера. Це дозволяє вирівнювати елементи по вертикалі та горизонталі; міняти порядок їх появи; задавати напрямок, в якому викладаються всі елементи, та багато іншого.
Приклад простої верстки, створеної за допомогою флексбоксів
До появи флексбоксів верстати типові веб-сайти було досить важко через обмеження в існуючих моделях верстки. Існуючі моделі верстки насправді не підходили для складних веб-застосунків, які так поширені в сучасному Інтернеті. Блокова модель верстки була розроблена для макету документа; інлайнова модель для тексту; таблична модель для розміщення двовимірних даних у табличному форматі. А позиціонування дозволяло дуже точно розміщувати елемент без урахування інших елементів у документі.
Через обмеження цих моделей верстки, веб-сайти часто створювалися з використанням комбінації обтічних елементів, позиціонованих елементів і, можливо, навіть верстки таблицями. Отримання сайту, який добре виглядав би на екранах різних розмірів, викликало головний біль. Єдиний спосіб змусити веб-сайт виглядати правильно — це включити купу хаків, які часто здавались нелогічними як у CSS, так і в HTML. Це абсолютно суперечить підходу «поділ уявлення та вмісту», якого прагне будь-який пристойний веб-розробник.
Модуль CSS Flexible Box Layout був розроблений CSS Working Group і пропонує блокову модель, яка може подолати зазначені проблеми. W3C надав йому статус «Можлива рекомендація» 26 травня 2016 року, але модуль отримав широку підтримку браузерів задовго до цієї дати. цілий ряд властивостей вирівнювання. Як ви побачите у цьому посібнику, вирівнювання є важливою частиною флексбоксів. Grid Layout також використовує більшість тих же властивостей для вирівнювання, тому W3C виділив властивості вирівнювання з модуля флексбоксу і переніс їх в окремий модуль «вирівнювання» — CSS Box Alignment Module Level 3.
По суті, флекс-властивості визначають розміри елементів і в якому напрямку вони йдуть. Властивості вирівнювання задають спосіб вирівнювання елементів усередині їх контейнера як по горизонталі, так і по вертикалі.
Ми розглянемо більшість з цих властивостей у цьому посібнику.-field-book-tag field-type-taxonomy-term-reference field-label-hidden">