Концепції
Flexible Box Layout, часто відомий як Flexbox, - це модуль CSS, який дозволяє розміщувати елементи всередині контейнера та ефективно розподіляти простір між ними, навіть коли розмір та порядок елементів невідомі або змінюються. Flexbox створений для спрощення та оптимізації вирівнювання, розподілу простору та управління порядком елементів внутрішньої структури контейнера.
Основні поняття та властивості Flexbox:
Гнучкий контейнер (Flex Container): Елемент, який встановлюється як display: flex; або display: inline-flex;, стає гнучким контейнером. Це вказує, що всередині цього контейнера будуть застосовуватися правила Flexbox.
Гнучкі дочірні елементи (Flex Items): Дочірні елементи гнучкого контейнера, які підкоряються правилам Flexbox.
Використовуючи технологію Flexbox можна легко та ефективно розробляти складні й адаптивні дизайни сторінок.
Що може робити Flexbox-контейнер:
Змінювати ширину і висоту його дітей
Змінювати напрямок розташування його дітей
Вирівнювати в колонку або рядок своїх дітей
Змінювати порядок відображення елементів і відстань між ними
Flex Container скасовує більшість правил розташування елементів за їх типом і потоком документа.
Особливості використання FlexBox:
Елементи втрачають «тип», перестають бути рядковими або блоковими та стають flex-елементами.
Блокові елементи перестають розташовуватись вертикально один під одним.
Крайні відступи на стику з межею батька не випадають.
Вертикальні відступи елементів не схлопуються.
Працюють автоматичні вертикальні відступи.
Термінологія
В Flexbox моделі управління простором відбувається вздовж двох осей: головної осі (main axis) та поперечної осі (cross axis).
main axis - головна вісь flex-контейнера, вздовж якої розташовуються елементи. Вона може бути як горизонтальна, так і вертикальна. А її напрямок визначається властивістю flex-direction.
main-start і main-end - відповідно початок і кінець головної осі. Елементи розташовуються в контейнері між цими двома точками.
cross axis - поперечна вісь, яка завжди перпендикулярна до головної осі. Її напрямок залежить від головної осі і явно не встановлюється.
cross-start і cross-end - відповідно початок і кінець поперечної осі, вздовж якої розташовуються рядки елементів.
Покликання:
Last updated