Назад Вперед зміст

Основи та термінологія

Оскільки Flexbox є повноцінним модулем, а не просто властивістю, він включає багато цікавого, зокрема повний набір робочих властивостей. Деякі з них призначені для використання на контейнері (батьківському елементі, який називається flex-контейнер), тоді як інші допомагають реалізувати поведінку дочірніх елементів.

Елементи у Flexbox можуть розташовуватись вздовж основної осі (від main-start до main-end) або вздовж поперечної осі (від cross-start до cross-end).

Main axis — основна вісь flex-контейнера, вздовж якої розташовуються flex-елементи. Зверніть увагу, що вона не обов’язково горизонтальна — усе залежить від властивості flex-direction, про яку ви дізнаєтесь далі.

  1. Main-start | main-end — flex-елементи розміщуються в межах контейнера від main-start до main-end.
  2. Main-size — висота або ширина flex-елемента, що залежить від напрямку основної осі.
  3. Cross axis — вісь, перпендикулярна основній, називається поперечною. Її напрямок також залежить від напрямку основної осі.
  4. Cross-start | cross-end — flex-лінії, заповнені елементами та розташовані в контейнері від cross-start до cross-end.
  5. Cross-size — ширина або висота flex-елемента залежно від напрямку головної осі.

Властивості батьківських елементів (flex-контейнера)

Це властивість створює сам flex-контейнер — або блочний, або inline, залежно від заданого значення. Також воно встановлює flex-контекст для кожного безпосереднього нащадка.

.container {
display: flex; /* или inline-flex */
}

CSS-колонки не мають ефекту на flex-контейнер.

Приклад

Використовуємо елемент <header> з заголовком верхнього рівня всередині та елемент <section>, який містить три елементи <article>. Ми будемо використовувати їх для створення стандартного трьохколонкового макета.

HTML-елемент <header> є вступним контентом, зазвичай групою вступних або навігаційних засобів. Він може містити інші заголовкові елементи, а також логотип, форму пошуку, ім’я автора та інші елементи.

HTML-елемент <section> є автономним розділом — який не може бути представленим більш точним з точки зору семантики елементом — у межах HTML-документа. Як правило (але не завжди), розділи мають заголовок.

HTML-елемент <article> представляє самостійну частину документа, сторінки, застосунку або сайту, яка призначена для незалежного розповсюдження або повторного використання. Цей елемент може представляти статтю на форумі, замітку в журналі чи газеті, запис у блозі або будь-який інший самостійний фрагмент контенту.

Спочатку потрібно вибрати, які елементи слід розмістити у вигляді flex-блоків. Для цього ми встановлюємо спеціальне значення display у батьківському елементі тих елементів, які ви хочете оформити. У нашому випадку ми хочемо розташувати елементи <article>, тому це значення ми встановлюємо на <section> (який стає flex-контейнером):


section {
display: flex;
}

У результаті ми отримаємо ось таке:

Ми отримали трьохколонковий макет з колонками однакової ширини та висоти. Це пов’язано з тим, що значення за замовчуванням, задані для flex-елементів (дочірніх елементів flex-контейнера), вже налаштовані для вирішення основних завдань.

Батьківський елемент, до якого застосовано властивість display: flex (у нашому прикладі це <section>), називається **flex-контейнером**.

Елементи, які розміщуються в ньому як flex-блоки, називаються **flex-елементами** (у нашому прикладі це <article>).

Назад Вперед Зміст