Властивості flex-контейнера

Ця властивість показує, як flex-елементи знаходяться у flex-контейнері, задаючи напрямок головної осі flex-контейнера. Елементи можуть розташовуватися за двома основними напрямками - як рядки по горизонталі або як стовпці по вертикалі.

Значення

Зі значенням row flex-елементи розташовуються в ряд зліва направо в контексті ltr.

При значенні row-reverse flex-елементи розташовуються в ряд праворуч наліво в контексті ltr.

Зі значенням column flex-елементи розташовуються в колонку зверху вниз.

При значенні column-reverse flex-елементи розташовуються в колонку знизу нагору.

Значення за замовчуванням: row .

row і row-reverse залежать від режиму написання, тому в контексті rtl вони будуть відповідно перевернуті.

flex-wrap

Вихідна концепція flexbox – це контейнер для встановлення своїх елементів в один рядок. Якщо flex-контейнер має свої елементи в один або кілька рядків, то властивість flex-wrap керує напрямком, в якому ці нові рядки розташовуються.

Значення

flex-елементи відображаються в один рядок, за умовчанням вони зменшуються, щоб відповідати ширині flex-контейнера.

flex-елементи відображаються у декілька рядків, якщо це необхідно, зліва направо та зверху вниз.

flex-елементи відображаються у декілька рядків, якщо це необхідно, зліва направо та знизу вгору.

Значення за замовчуванням: nowrap .

Ці властивості залежать від режиму написання, тому в контексті rtl вони відповідно будуть перевернуті.

flex-flow

Ця властивість є скороченням для встановлення властивостей flex-direction та flex-wrap.

Значення

Значення за замовчуванням: row nowrap .

justify-content

Властивість justify-content вирівнює flex-елементи вздовж головної осі поточного рядка flex-контейнера.Властивість допомагає розподіляти вільний простір, що залишився, коли всі flex-елементи в рядку не розтягуються або розтягуються, але досягли максимального розміру.

Значення

flex-елементи вирівнюються ліворуч flex-контейнера в контексті ltr.

flex-елементи вирівнюються праворуч flex-контейнера в контексті ltr.

flex-елементи вирівнюються центром flex-контейнера.

flex-елементи відображаються з рівним інтервалом між ними, перший та останній flex-елементи вирівнюються по краях flex-контейнера.

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

Значення за замовчуванням: flex-start

align-items

flex-елементи можуть бути вирівняні по поперечній осі поточного рядка flex-контейнера, подібно до justify-content , але в перпендикулярному напрямку. Ця властивість встановлює стандартне вирівнювання для всіх flex-елементів, включаючи анонімних.

Значення

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

flex-елементи розташовуються біля поперечного початку flex-контейнера.

flex-елементи розташовуються біля поперечного кінця flex-контейнера.

flex-елементи розташовуються у центрі поперечної осі flex-контейнера.

flex-елементи вирівнюються таким чином, щоб їх базові лінії були вирівняні.

Значення за замовчуванням: stretch .

Докладніше про те, як розраховуються базові лінії, читайте тут.

align-content

Властивість align-content вирівнює рядки всередині flex-контейнера, коли в поперечній осі є додатковий простір, подібно до того, як justify-content вирівнює окремі елементи по головній осі.

Значення

flex-елементи відображаються з додатковим простором після кожного рядка flex-елементів.

flex-елементи розташовуються чаркою біля поперечного початку flex-контейнера.

flex-елементи розташовуються чаркою біля поперечного кінця flex-контейнера.

Рядки flex-елементів розташовуються у центрі поперечної осі flex-контейнера.

Рядки flex-елементів відображаються з рівним інтервалом між ними, перший і останній рядки вирівнюються по краях flex-контейнера.

flex-елементи відображаються з рівним інтервалом навколо кожного рядка.

Значення за замовчуванням: stretch .

Ця властивість має ефект лише тоді, коли flex-контейнер містить кілька рядків flex-елементів. Якщо елементи розміщуються в один рядок, властивість align-content ніяк не впливає на макет.

Зауваження

Всі властивості column-* не впливають на flex-контейнер.
Псевдоелементи :: first-line та :: first-letter не застосовуються до flex-контейнерів.

Див. також

align-content
align-items
flex-direction
flex-wrap
justify-content
place-content
Адаптивний макет на флексбоксах
Вкладені флекс-контейнери
Вирівнювання гридів
Вирівнювання за допомогою флексбоксів
Вирівнювання елементів форм
Напрямок флексбоксів
Створення медіа-об'єктів
Крапки між словами

Гайд з flexbox

Все, що потрібно знати про флексбокси: основні терміни, властивості флекс-контейнера та флекс-елементів, корисні посилання на тему.

Що це таке?
Основні терміни

Властивості флекс-контейнера

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
gap

order
flex-grow
flex-shrink
flex-basis
flex
align-self
Посилання

Єгор Левченко радить
Олена Батицька радить
Андрій Захаров радить

Коли потрібно використовувати flexbox, коли grid? Чи бувають винятки?

Оновлено 12 квітня 2024

Що це таке?

Копіювати посилання "Що це?" Скопійовано

Довгий час веб-інтерфейси були статичними – сайти розроблялися та переглядалися лише на екранах моніторів стаціонарних комп'ютерів. Однак із десяток років тому, зовсім недавно за історичними мірками, у нас з'явилося величезне розмаїття екранів — від мобільних телефонів до телевізорів, — на яких ми можемо взаємодіяти з сайтами. Так виникла потреба в гнучких системах розкладки.

Ідея флексбоксів з'явилася ще у 2009 році, і цей стандарт досі розвивається та опрацьовується. Основна ідея флексів - гнучке розподіл місця між елементами, гнучка розстановка, вирівнювання, гнучке керування. Ключове слово - гнучке, що й відбито у назві (flex - англ. гнучко).

Основні терміни

Скопіювати посилання "Основні терміни" Скопійовано

Флекс-контейнер: елемент, до якого застосовується властивість display: flex. Вкладені у нього елементи підпорядковуються правилам розкладки флексів.
Флекс-елемент: елемент, вкладений у флекс-контейнер.

Основна вісь: основна напрямна флекс-контейнера, вздовж якої розташовуються флекс-елементи.
Поперечна (побічна, перпендикулярна) вісь: вісь, що йде перпендикулярно до основної. Пізніше ви зрозумієте, навіщо вона потрібна.

Початок / кінець основної осі: точки на початку та в кінці основної осі відповідно. Це стане нам у нагоді для вирівнювання флекс-елементів.
Початок/кінець поперечної осі: точки на початку та в кінці поперечної осі відповідно.

Розмір по основній осі (основний розмір): розмір флекс-елемента вздовж основної осі Це може бути ширина чи висота залежно від напрямку основної осі.
Розмір поперечної осі (поперечний розмір): розмір флекс-елемента вздовж поперечної осі Це може бути ширина чи висота залежно від напрямку поперечної осі. Цей розмір завжди перпендикулярний основному розміру.Якщо основний розмір це ширина, то поперечний розмір це висота, і навпаки.

Властивості флекс-контейнера

Скопіювати посилання "Властивості флекс-контейнера" Скопійовано

display

Скопіювати посилання "display" Скопійовано

.container    display: flex;>
.container

display: flex;
>

Коли ми задаємо якомусь елементу значення flex для властивості display, ми перетворюємо цей елемент на флекс-контейнер. Усередині нього починає діяти флекс-контекст, його дочірні елементи починають підкорятися властивостям флексбоксу.

Зовні флекс-контейнер виглядає як блоковий елемент - займає всю ширину батька, наступні за ним елементи в розмітці переносяться на новий рядок.

.container    display: inline-flex;>
.container

display: inline-flex;
>

Якщо контейнеру задано значення inline - flex , то зовні він починає вести себе як малий (інлайн) елемент - розміри залежать тільки від внутрішнього контенту, встає у рядок з іншими елементами. Усередині це такий самий флекс-контейнер, як і при попередньому значенні.

flex - direction

Скопіювати посилання "flex-direction" Скопійовано

Властивість управління напрямом основної та поперечної осей.

.container    display: flex;
flex-direction: row;>
.container

display: flex;
flex-direction: row;
>

row (значення за умовчанням) - основна вісь йде горизонтально зліва направо, поперечна вісь йде вертикально зверху вниз.
row - reverse - основна вісь йде горизонтально праворуч наліво, поперечна вісь йде вертикально зверху вниз.
column - основна вісь йде вертикально зверху вниз, поперечна вісь йде горизонтально зліва направо.
column - reverse - основна вісь йде вертикально знизу вгору, поперечна вісь йде горизонтально зліва направо.

Важливий момент: на сайтах з направленням тексту справа наліво, наприклад, на сайті арабською мовою, для значень row і row - reverse основна вісь йтиме у зворотному напрямку. Для значень column і column - reverse свій напрямок змінить поперечна вісь.

flex - wrap

Скопіювати посилання "flex-wrap" Скопійовано

.container    display: flex;
flex-wrap: nowrap;>
.container

display: flex;
flex-wrap: nowrap;
>

За замовчуванням значення властивості flex - wrap - nowrap . При цьому флекс-елементи поміщаються (або намагаються уміститися) в один ряд і не переносяться до нового ряду, навіть якщо не влазять у розміри батька.

Встановивши значення wrap, ми можемо змінити цю поведінку, і флекс-елементи матимуть можливість перенестися в новий ряд, якщо не влазять в одну лінію у межах батька.

Ще одне можливе значення - wrap-reverse. У цьому випадку елементи будуть розташовуватися знизу вгору, заповнивши собою нижній ряд, а ті, що не влізли, перестрибнуть в ряд вище.

flex - flow

Скопіювати посилання "flex-flow" Скопійовано

Це властивість-шорткат для одночасного визначення значень властивостей flex-direction та flex-wrap.

.container    display: flex;
flex-flow: column wrap;>
.container

display: flex;
flex-flow: column wrap;
>

.container    display: flex;
flex-flow: row nowrap;>
.container

display: flex;
flex-flow: row nowrap;
>

Як і з усіма шорткатами, із цим варто бути обережним. Хоча він і дозволяє заощадити пару рядків коду, у разі перевизначення одного зі значень доведеться переписувати властивість повністю, повторюючи друге значення, яке не змінюється. У такому разі простіше було б мати дві окремі властивості і змінювати значення окремо.

justify - content

Скопіювати посилання "justify-content" Скопійовано

.container    display: flex;
justify-content: space-between;>
.container

display: flex;
justify-content: space-between;
>

Властивість дозволяє вирівнювати флекс-елементи всередині флекс-контейнера по осі.

start — елементи притискаються до того краю, звідки починається читання тією мовою, якою відображається сайт.
end — елементи притискаються до краю, протилежного початку читання мовою сайту.
flex – start – елементи притискаються до краю, від якого починається основна вісь.
flex – end – елементи притискаються до краю, у якого основна вісь закінчується.
left – елементи притиснуться до лівого краю батька.
right – елементи притиснуться до правого краю батька.
center - елементи вишиковуються по центру батька.
space - between - крайні елементи притискаються до країв батька, що залишаються вибудовуються всередині контейнера рівномірно, так, щоб між ними були однакові відступи.
space - around - вільний простір ділиться порівну між елементами і по половині від цієї частки розміщується з обох боків кожного елемента. Таким чином, між сусідніми елементами буде рівна відстань, а зовні крайніх елементів по половині цієї відстані.
space - evenly - вільне місце буде розподілено так, щоб відстань між будь-якими двома елементами була однаковою і відстань від крайніх елементів до краю була такою ж.

Хоча більшість значень підтримуються основними браузерами, з деякими можуть бути труднощі. Тому краще про всяк випадок перевіряйте підтримку на Can I use.

align - items

Скопіювати посилання "align-items" Скопійовано

.container    display: flex;
align-items: center;>
.container

display: flex;
align-items: center;
>

Властивість вирівнювання елементів усередині контейнера поперечної осі.

stretch (значення за замовчуванням) — елементи розтягуються уздовж поперечної осі так, щоб заповнити всього батька. Це дуже зручно, якщо ви робите двоколонковий макет. Раніше доводилося за допомогою різних милиць досягати однакової висоти, а тепер достатньо зробити контейнер флексом, і колонки за замовчуванням будуть однієї висоти.
flex - start або start - елементи вишиковуються біля початку поперечної осі. Різниця між ними лише в тому, що друге значення «поважає» напрямок читання обраної мови.
flex - end або end - елементи вишиковуються у кінця поперечної осі. Різниця між першим та другим значеннями аналогічна попередньому пункту.
center - елементи шикуються по центру поперечної осі.
baseline – елементи вирівнюються за базовою лінією тексту. "Базова лінія" - baseline - уявна лінія, що проходить по нижньому краю знаків шрифту (без урахування виносних елементів).

Це може бути важко зрозуміти відразу, тому ми зробили демку. Зверніть увагу, що, незалежно від розміру шрифту, всі блоки вирівнюються по базовій лінії першого рядка.

align - content

Скопіювати посилання "align-content" Скопійовано

.container    display: flex;
align-content: center;>
.container

display: flex;
align-content: center;
>

Властивість розподіляє вільний простір поперечної осі між рядами флекс-елементів. Припустимо, у вас 11 елементів у 3 рядах. Якщо розмір батька по поперечній осі дозволяє, то за допомогою align - content можна розподіляти рядки елементів: по верхньому краю, по нижньому, по центру або рівномірно.

Немає значення, якщо елементи розташовуються в один ряд.

stretch (значення за умовчанням) — ряди розтягуються однаково, щоб зайняти весь доступний простір батька.
flex - start / start - всі ряди розташовуються біля початку поперечної осі. Перше значення залежить від напрямку читання поточної мови, на відміну другого.
flex-end/end - всі ряди розташовуються у кінця поперечної осі. end «поважає» напрямок читання поточної мови.
center - ряди вирівнюються по центру батька.
space - between - перший ряд притискається до початку поперечної осі, останній - до кінця поперечної осі, а інші розташовуються так, щоб вільний простір був поділений на відступи між ними рівномірно.
space - around - відступи у кожного ряду рівнозначні відступів у будь-якого іншого ряду.
space - evenly - відступи між рядами та від країв батька однакові.

gap

Скопіювати посилання "gap" Скопійовано

За допомогою цієї властивості можна з легкістю задавати відступи між рядками та стовпцями.

Є коротким записом властивостей row-gap і column-gap.

Може мати одне чи два значення. Якщо вказано лише одне, то column - gap автоматично дорівнює row - gap. Якщо вказано два значення, то перше задаватиме відступи між рядами ( row - gap ), а друге - між колонками ( column - gap ).

Значення можна вказувати у будь-яких доступних одиницях виміру, включаючи відсотки.
Допускається використання функції calc().

.container    display: flex;
gap: 30px calc(10rem - 10px);>
.container

display: flex;
gap:
30px
calc(10rem
-
10px);
>

Властивості флекс-елемента

Скопіювати посилання "Властивості флекс-елемента" Скопійовано

order

Скопіювати посилання "order" Скопійовано

.container    display: flex;>
.item    order: 3;>
.container

display: flex;
>
.item

order:
3;
>

За допомогою якості order можна змінювати порядок відображення флекс-елементів усередині флекс-контейнера.

За замовчуванням елементи відображаються в порядку, в якому вони розташовані в розмітці, а значення властивості order дорівнює 0.

Значення задається як цілого негативного чи позитивного числа. Елементи постають за зростаючою.

flex - grow

Скопіювати посилання "flex-grow" Скопійовано

.container    display: flex;>
.item    flex-grow: 1;>
.container

display: flex;
>
.item

flex-grow:
1;
>

Ця властивість вказує, чи може виростати флекс-елемент за наявності вільного місця і наскільки. За замовчуванням значення дорівнює 0. Значенням може бути будь-яке позитивне число (включаючи 0).

Якщо всі флекс-елементів буде прописано flex - grow : 1 , то вільний простір у контейнері буде рівномірно розподілено між усіма.

Якщо при цьому одному з елементів ми поставимо flex - grow : 2 , то він намагатиметься зайняти вдвічі більше вільного місця, ніж його сусіди.

flex - shrink

Скопіювати посилання "flex-shrink" Скопійовано

.container    display: flex;>
.item    flex-shrink: 3;>
.container

display: flex;
>
.item

flex-shrink:
3;
>

Властивість flex-shrink повністю протилежна властивості flex-grow. Якщо контейнері не вистачає місця розташування всіх елементів без зміни розмірів, то властивість flex - shrink вказує, у яких пропорціях елемент зменшуватися.

Чим більше значення цієї властивості, тим швидше елемент буде стискатися в порівнянні з сусідами, що мають менше значення.

Значення за замовчуванням — 1. Значенням може бути будь-яке позитивне число (включаючи 0).

Дві попередні властивості працюють із пропорційним поділом простору, ні з конкретними розмірами. Вони досить непрості, навіть досвідчений розробник який завжди знає, як вони точно працюють. Загляньте в кінці статті, якщо хочете докладніше почитати про кожного з них.

flex - basis

Скопіювати посилання "flex-basis" Скопійовано

.container    display: flex;>
.item    flex-basis: 250px;>
.container

display: flex;
>
.item

flex-basis:
250px;
>

Властивість flex - basis вказує на розмір елемента перед тим, як вільне місце буде розподілено (див. flex-grow).

Значенням може бути розмір у будь-яких відносних або абсолютних одиницях: 20rem, 5vw, 250px. Також можна використовувати ключове слово auto (значення за замовчуванням). У цьому випадку при розрахунку розміру елемента будуть братися до уваги значення властивостей width , max - width , min - width або аналогічні властивості висоти, залежно від того, в якому напрямку основна вісь йде.

Якщо ніякі розміри не задані, а властивості flex - basis встановлено значення auto , елемент займає стільки простору, скільки потрібно для відображення контенту.

flex

Скопіювати посилання "flex" Скопійовано

.container    display: flex;>
.item    flex: 1 1 auto;>
.container

display: flex;
>
.item

flex:
1
1 auto;
>

Властивість-шорткат, за допомогою якого можна вказати значення трьох властивостей одночасно: flex-grow, flex-shrink та flex-basis. Перше значення є обов'язковим, інші є опціональними.

Значення за замовчуванням: 0 1 auto , яке розшифровується як flex - grow : 0 , flex - shrink : 1 , flex - basis : auto .

/* 0 0 auto */flex: none;
/* Одне значення, число без одиниць: flex-grow */flex: 2;
/* Одне значення, ширина/висота: flex-basis */flex: 10em;flex: 30px;flex: auto;flex: content;
/* Два значення: flex-grow | flex-basis */flex: 1 30px;
/* Два значення: flex-grow | flex-shrink */flex: 2 2;
/* Три значення: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%;
/* Глобальні значення */flex: inherit;flex: initial;flex: unset;
/* 0 0 auto */
flex: none;
/* Одне значення, число без одиниць: flex-grow */
flex:
2;
/* Одне значення, ширина/висота: flex-basis */
flex:
10em;
flex:
30px;
flex: auto;
flex: content;
/* Два значення: flex-grow | flex-basis */
flex:
1
30px;
/* Два значення: flex-grow | flex-shrink */
flex:
2
2;
/* Три значення: flex-grow | flex-shrink | flex-basis */
flex:
2
2
10%;
/* Глобальні значення */
flex: inherit;
flex: initial;
flex: unset;

align - self

Скопіювати посилання "align-self" Скопійовано

.container    display: flex;
align-items: flex-start;>
.item    align-self: flex-end;>
.container

display: flex;
align-items: flex-start;
>
.item

align-self: flex-end;
>

За допомогою цієї властивості можна вирівняти один або кілька елементів інакше, ніж в батьківського елемента. Наприклад, у коді вище у батька встановлено вирівнювання вкладених елементів по верхньому краю батька. А для елемента з класом .item ми задаємо вирівнювання по нижньому краю.

Посилання

Скопіювати посилання "Посилання" Скопійовано

На практиці

Скопіювати посилання "На практиці" Скопійовано

2.22. CSS3-flexbox

CSS3-flexbox - це спеціальна технологія, яка була введена в останній версії каскадних стилів, що дозволяє задавати гнучку сітку розташування блоків усередині якогось контейнера-батька.

Які можливості дає ця сітка:

можливість керувати колончастою структурою основного каркасу html-верстки;
керувати орієнтацією розташування html-тегів подібно до табличної верстки;
керувати порядком розташування;
та багато інших.

Сама технологія css-flexbox стоїть на базуванні блоків у відносній горизонтальній та вертикальній осях згідно наступної схеми:

1.1. Властивість display: flex
1.2. Вирівнюємо горизонтально justify-content
1.3. Вертикальне вирівнювання align-items
1.4. Орієнтація основної осі flex-direction
1.5. Розміщення у декілька рядків flex-wrap
1.6.Спрямованість та багаторядковість одним правилом flex-flow
1.7. Вирівнюємо вертикально у всіх рядках align-content
2.1. Упорядкування блоків order
2.2. Базис флекс-блоку flex-basis
2.3. Пропорційне збільшення ширини блоку flex-grow
2.4. Пропорційне зменшення ширини блоку flex-shrink
2.5. Запис трьох попередніх одним рядком flex
2.6. Вирівнювання дочірніх блоків align-self

Наведемо список веб-браузерів, які підтримують властивість блоків як стандартно, так і із застосуванням спецпрефіксів:

ІЄ: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Хром: 29.0, 21.0 -webkit-
Сафарі: 6.1 -webkit-
Опера: 12.1 -webkit-
Сафарі (під Мак): 7.0 -webkit-
Опера-Міні: 8
Анройд-Браузер: 4.4, 4.1 -webkit-
Хром (під Андройд): 44

1.1. Властивість display: flex

CSS-правило призначене для вибудовування flexbox-сітки, яка будується з дочірніх html-тегів, розташованих усередині батьківського контейнера. Для завдання даної сітки необхідно встановити правило display у значення:

display: flex; - Для блокового відображення;
display: inline-flex; - для інлайнового відображення.

Слід зазначити, що для деяких версій браузерів необхідно прописувати це правило за допомогою спецпрефіксів (див. пункт вище), а також те, що html-теги, що лежать у батьків, без обгортки вважаються анонімними:

1.2. Вирівнюємо горизонтально justify-content

Правило використовується для того, щоб вирівняти горизонтально дочірні об'єкти всередині батьківського flexbox-контейнера. Це правило не успадковується.

justify-content
Значення:
flex-start	Вирівнює по лівій кромці. Дефолтне значення
flex-end	Вирівнює правою кромкою.
center	Вирівнює посередині.
space-between	По всій ширині батька на рівновеликі відрізки.Варто зазначити, що перший елемент приживається до лівого краю без порожнеч, але з урахуванням паддингів, а останній також до правого краю. Всі інші блокові елементи розміщуються між першим та останнім через однакові відрізки порожнечі.
space-around	По всій ширині так, що між кожними двома блоками буде однаковий відступ, а по краю половина.
initial	Завдання дефолтного значення.
inherit	Призначено для повідомлення css-інтерпретатору, що значення потрібно набирати у батьківського тегу.

Формат запису

Скільки осей у Флекс контейнера

Властивості flex-контейнера

Значення

flex-wrap

Значення

flex-flow

Значення

justify-content

Значення

align-items

Значення

align-content

Значення

Зауваження

Див. також

Гайд з flexbox

Що це таке?

Основні терміни

Властивості флекс-контейнера

display

flex - direction

flex - wrap

flex - flow

justify - content

align - items

align - content

gap

Властивості флекс-елемента

order

flex - grow

flex - shrink

flex - basis

flex

align - self

Посилання

На практиці

2.22. CSS3-flexbox

1.1. Властивість display: flex

1.2. Вирівнюємо горизонтально justify-content

Схожі статті

Недавні статті