Основні концепції
Flexible Box Layout (Flexbox) - це CSS-модуль, який визначає набір властивостей для розміщення, вирівнювання і розподілу простору між елементами в контейнері, навіть якщо їх розмір невідомий або динамічний.
Основна ідея полягає в тому, щоб розділити елементи на блок-контейнер
(flex-контейнер) і його дітей (flex-елементи).
Flexbox-контейнер може змінювати ширину і висоту його дітей, а також напрямок їх розташування - вирівнювання в колонку або рядок, порядок відображення елементів і відстань між ними. Контейнер розширює елементи, щоб найоптимальніше заповнити доступний простір, або стискає їх, щоб запобігти переповненню.
У flex-контейнері скасовується більшість правил розташування елементів за їх типом і потоком документа.
- Елементи втрачають «тип», перестають бути рядковими або блоковими.
- Блокові елементи перестають розташовуватись вертикально один під одним.
- Крайні відступи на стику з межею батька не випадають.
- Вертикальні відступи елементів не схлопуються.
- Працюють автоматичні вертикальні відступи.
Термінологія
Звичайний порядок розташування елементів визначається потоком документа та їх типом (блоковий або рядковий). У моделі Flexbox напрямок розташування елементів визначається направляючими осями контейнера, вздовж яких вибудовуються елементи.
- main axis - головна вісь flex-контейнера, вздовж якої розташовуються
елементи. Вона не обов'язково горизонтальна, її напрямок контролюється
властивістю
flex-direction. - main-start і main-end - елементи в контейнері завжди розташовуються
від
main-start(початок головної осі) і доmain-end(кінець головної осі). - cross axis - поперечна вісь, яка завжди перпендикулярна до головної осі. Її напрямок залежить від головної осі і явно не встановлюється.
- cross-start і cross-end - початок і кінець поперечної осі, вздовж якої розташовуються рядки елементів.
Додаткові матеріали
Використовуйте ці інтерактивні майданчики для того, щоб візуально закріпити основні концепції, які розглядаються.