Flexbox приклади. Верстка за допомогою CSS Flexbox. flex – короткий запис для властивостей flex-grow, flex-shrink та flex-basis

CSS flexbox (Flexible Box Layout Module)— модуль макету гнучкого контейнера — це спосіб компонування елементів, в основі лежить ідея осі.

Flexbox складається з гнучкого контейнера (flex container)і гнучких елементів (flex items). Гнучкі елементи можуть вишиковуватися в рядок або стовпчик, а вільний простір, що залишився, розподіляється між ними різними способами.

Модуль flexbox дозволяє вирішувати такі завдання:

• Розташовувати елементи в одному з чотирьох напрямків: ліворуч праворуч, праворуч ліворуч, зверху вниз або знизу вгору.
• Перевизначати порядок відображення елементів.
• Автоматично визначати розміри елементів так, щоб вони вписувалися в доступний простір.
• Вирішувати проблему з горизонтальним та вертикальним центруванням.
• Переносити елементи всередині контейнера, не допускаючи його переповнення.
• Створювати стовпчики однакової висоти.
• Створювати притиснутий донизу сторінки.

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

Список поточних проблем модуля та крос-браузерних рішень для них ви можете прочитати у статті Philip Walton.

Що таке flexbox

Підтримка браузерами

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome для Android: 44

1. Основні поняття

Для опису модуля Flexbox використовується певний набір термінів. Значення flex-flow та режим запису визначають відповідність цих термінів фізичним напрямкам: верх/право/низ/ліво, осям: вертикальна/горизонтальна та розмірам: ширина/висота.

Головна вісь (main axis)- Вісь, вздовж якої викладаються flex-елементи. Вона простягається в основному вимірі.

Main start та main end— лінії, які визначають початкову та кінцеву сторони flex-контейнера, щодо яких викладаються flex-елементи (починаючи з main start у напрямку main end).

Основний розмір (main size) - ширина або висота flex-контейнера або flex-елементів, залежно від того, що з них знаходиться в основному вимірі, визначають основний розмір flex-контейнера або flex-елемента.

Поперечна вісь (cross axis)- Вісь, перпендикулярна головної осі. Вона простягається у поперечному вимірі.

Cross start та cross end- лінії, які визначають початкову та кінцеву сторони поперечної осі, щодо яких викладаються flex-елементи.

Поперечний розмір (cross size)- ширина або висота flex-контейнера або flex-елементів, залежно від того, що знаходиться у поперечному вимірі, є їх поперечним розміром.

2. Flex-контейнер

Flex-контейнер встановлює новий гнучкий контекст форматування для його вмісту. Flex-контейнер не є блоковим контейнером, тому для дочірніх елементів не працюють такі CSS-властивості, як float, clear, vertical-align. Також, на flex-контейнер не впливають властивості column-*, що створюють колонки в тексті та псевдоелементи:: first-line і:: first-letter .

Модель flexbox-розмітки пов'язана з певним значенням CSS-властивості display батьківського html-елемента, що містить у собі дочірні блоки. Для керування елементами за допомогою цієї моделі потрібно встановити властивість display таким чином:

Flex-container ( /*генерує flex-контейнер рівня блоку*/ display: -webkit-flex; display: flex; ) .flex-container ( /*генерує flex-контейнер рівня рядка*/ display: -webkit-inline-flex; display: inline-flex;

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

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

3. Flex-елементи

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

• Для flex-елементів блокується їх значення властивості display. Значення display: inline-block; та display: table-cell; обчислюється у display: block; .
• Порожній простір між елементами зникає: він не стає своїм власним flex-елементом, навіть якщо міжелементний текст обернутий на анонімний flex-елемент. Для вмісту анонімного flex-елемента неможливо встановити власні стилі, але він успадковуватиме їх (наприклад, параметри шрифту) від flex-контейнера.
• Абсолютно позиціонований flex-елемент не бере участі в компонуванні гнучкого макету.
• Поля margin сусідніх flex-елементів не хлопаються.
• Відсоткові значення margin і padding обчислюються від внутрішнього розміру блоку, що містить їх.
• margin: auto; розширюються, поглинаючи додатковий простір у відповідному вимірі. Їх можна використовувати для вирівнювання чи розсунення суміжних flex-елементів.
• Автоматичний мінімальний розмір flex-елементів за замовчуванням є мінімальним розміром вмісту, тобто min-width: auto; . Для контейнерів з прокручуванням автоматичний мінімальний розмір зазвичай дорівнює нулю.

4. Порядок відображення flex-елементів та орієнтація

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

4.1. Напрямок головної осі: flex-direction

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

Синтаксис

Flex-container ( display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; )

4.2. Управління багаторядковістю flex-контейнера: flex-wrap

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

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

Синтаксис

Flex-container ( display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; )

4.3. Короткий запис напрямку та багаторядності: flex-flow

Властивість дозволяє визначити напрямки головної та поперечної осей, а також можливість перенесення flex-елементів за необхідності на кілька рядків. Є скороченим записом властивостей flex-direction і flex-wrap . Значення за промовчанням flex-flow: row nowrap; . властивість не успадковується.

Синтаксис

Flex-container ( display: -webkit-flex; -webkit-flex-flow: row wrap; display: flex; flex-flow: row wrap; )

4.4. Порядок відображення flex-елементів: order

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

Спочатку всі flex-елементи мають order: 0; . При вказівці значення -1 для елемента він переміщається на початок терміни, значення 1 - в кінець. Якщо кілька flex-елементів мають однакове значення order , вони відображатимуться відповідно до вихідного порядку.

Синтаксис

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-order: 1; order: 1; )
Мал. 6. Порядок відображення flex-елементів

5. Гнучкість flex-елементів

Визначальним аспектом гнучкого макета є можливість «згинати» flex-елементи, змінюючи їх ширину/висоту (залежно від того, який розмір знаходиться на головній осі), щоб заповнити доступний простір в основному вимірі. Це робиться за допомогою властивості flex. Flex-контейнер розподіляє вільний простір між своїми дочірніми елементами (пропорційно їхньому коефіцієнту flex-grow) для заповнення контейнера або стискає їх (пропорційно їхньому коефіцієнту flex-shrink), щоб запобігти переповненню.

Flex-елемент буде повністю «негнучким», якщо його значення flex-grow і flex-shrink рівні нулю, і «гнучкий» в іншому випадку.

5.1. Завдання гнучких розмірів однією властивістю: flex

Властивість є скороченим записом властивостей flex-grow, flex-shrink та flex-basis. За замовчуванням: flex: 0 1 auto; . Можна вказувати як одне, і всі три значення властивостей. Властивість не успадковується.

Синтаксис

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; )

5.2. Коефіцієнт зростання: flex-grow

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

Синтаксис

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-grow: 3; flex-grow: 3; )

5.3. Коефіцієнт стиснення: flex-shrink

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

Синтаксис

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-shrink: 3; flex-shrink: 3; )

5.4. Базовий розмір: flex-basis

Властивість встановлює початковий основний розмір flex-елемента до розподілу вільного простору відповідно до коефіцієнтів гнучкості. Для всіх значень, крім auto і content, базовий гнучкий розмір визначається так само, як width у горизонтальних режимах запису. Відсоткові значення визначаються щодо розміру flex-контейнера, а якщо розмір не заданий, значенням для flex-basis, що використовується, є розміри його вмісту. Чи не успадковується.

Синтаксис

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-basis: 100px; flex-basis: 100px; )

6. Вирівнювання

6.1. Вирівнювання по осі: justify-content

Властивість вирівнює flex-елементи по головній осі flex-контейнера, розподіляючи вільний простір, незайнятий flex-елементами. Коли елемент перетворюється на flex-контейнер, flex-елементи за замовчуванням згруповані разом (якщо їм не задані поля margin). Проміжки додаються після розрахунку значень marginта flex-grow . Якщо елементи мають ненульове значення flex-grow або margin: auto; , властивість не впливатиме. Властивість не успадковується.

Синтаксис

Flex-container ( display: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start; )

6.2. Вирівнювання по поперечній осі: align-items та align-self

Flex-елементи можна вирівнювати по поперечній осі поточного рядка flex-контейнера. align-items встановлює вирівнювання всіх елементів flex-контейнера, включаючи анонімні flex-елементи. align-self дозволяє перевизначити це вирівнювання окремих flex-елементів. Якщо будь-яке з поперечних margin flex-елемента має значення auto , align-self не має жодного впливу.

6.2.1. Align-items

Властивість вирівнює flex-елементи, у тому числі і анонімні flex-елементи поперечної осі. Чи не успадковується.

Синтаксис

Flex-container ( display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; )

6.2.2. Align-self

Властивість відповідає за вирівнювання окремо взятого flex-елемента за висотою flex-контейнера. Перевизначає вирівнювання, задане align-items. Чи не успадковується.

Синтаксис

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-align-self: center; align-self: center; )

6.3. Вирівнювання рядків flex-контейнера: align-content

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

Синтаксис

Flex-container ( display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-end height: 100px;

Я хотів би розповісти про FlexBox. Модуль Flexbox-верстки (flexible box - "гнучкий блок", на Наразі W3C Candidate Recommendation) ставить завдання запропонувати більше ефективний спосібверстки, вирівнювання та розподілу вільного місця між елементами в контейнері, навіть коли їх розмір невідомий та/або динамічний (звідси слово «гнучкий»).

Головна задумка flex-верстки в наділенні контейнера здатністю змінювати ширину/висоту (і порядок) своїх елементів для кращого заповнення простору (у більшості випадків – для підтримки всіх видів дисплеїв та розмірів екранів).Flex-контейнер розтягує елементи для заповнення вільного місця або стискає їх, щоб запобігти виходу за кордон.

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

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

Якщо звичайний макет ґрунтується на напрямках потоків блокових та інлайн-елементів, то flex-макет ґрунтується на «напрямках flex-потоку».

Flexbox

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

main-axis - головна вісь, вздовж якого розташовуються flex-елементи.Зверніть увагу, вона обов'язково має бути горизонтальною, все залежить від якості justify-content.
main-start | main-end - flex-елементи розміщуються в контейнері від позиції main-start позиції main-end.
main size - ширина або висота flex-елемента в залежності від обраної основної величини.Основна величина може бути або завширшки, або заввишки елемента.
cross axis – поперечна вісь, перпендикулярна головній.Її напрямок залежить від напрямку головної осі.
cross-start | cross-end — flex-рядки заповнюються елементами та розміщуються у контейнері від позиції cross-start та позиції cross-end.
cross size - ширина або висота flex-елемента в залежності від обраної розмірності дорівнює цій величині.Ця властивість збігається з width або height елемента, залежно від обраної розмірності.

Властивості
display: flex | inline-flex;

Визначає flex-контейнер (інлайновий чи блоковий залежності від обраного значення), підключає flex-контекст для всіх його безпосередніх нащадків.

display: other values ​​​| flex | inline-flex;

Майте на увазі:

CSS-стовпці columns не працюють з flex-контейнеромfloat, clear та vertical-align не працюють з flex-елементами

flex-direction

Застосовується до батьківського елемента flex-контейнера.

Встановлює головну вісь main-axis, визначаючи цим напрямок для flex-елементів, які у контейнері.

flex-direction: row | row-reverse | column | column-reverse

row (за замовчуванням): зліва направо для ltr, праворуч наліво для rtl;
row-reverse: праворуч наліво для ltr, зліва направо для rtl;
column: аналогічно row, зверху донизу;
column-reverse: аналогічно row-reverse, знизу нагору.

flex-wrap

Застосовується до батьківського елемента flex-контейнера.

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

flex-wrap: nowrap | wrap | wrap-reverse

nowrap (за замовчуванням): однорядковий / зліва направо для ltr, праворуч наліво для rtl;
wrap: багаторядковий / зліва направо для ltr, праворуч наліво для rtl;
wrap-reverse: багаторядковий / праворуч наліво для ltr, зліва направо для rtl.

flex-flow

Застосовується до батьківського елемента flex-контейнера.

Це скорочення для властивостей flex-direction та flex-wrap, разом визначають головну та поперечну осі.За замовчуванням набуває значення row nowrap.

flex-flow< ‘flex-direction’> || < ‘Flex-wrap’>

justify-content

Застосовується до батьківського елемента flex-контейнера.

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

justify-content: flex-start flex-end центр | space-between | space-around

flex-start (за замовчуванням): елементи зсуваються на початок рядка;
flex-end: елементи зсуваються до кінця рядка;
center: елементи вирівнюються на середину рядка;
space-between: елементи розподіляються рівномірно (перший елемент на початку рядка, останній – наприкінці)
space-around: елементи розподіляються рівномірно з рівною відстанню між собою та поза рядком.

justify-content
align-items

Застосовується до батьківського елемента flex-контейнера.

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

align-items: flex-start | flex-end центр | Baseline | stretch

flex-start: межа cross-start для елементів розташована на позиції cross-start;
flex-end: межа cross-end для елементів розташована на позиції cross-end;
center: елементи вирівнюються у центрі поперечної осі;
baseline: елементи вирівнюються за своєю базовою лінією;
stretch (за замовчуванням): елементи розтягуються, заповнюючи контейнер (з урахуванням min-width/max-width).

align-items
align-content

Застосовується до батьківського елемента flex-контейнера. Вирівнює рядки flex-контейнера за наявності вільного місця на поперечній осі аналогічно тому, як це робить justify-content на головній осі. Примітка: ця властивість не працює з однорядковим flexbox.

align-content: flex-start flex-end центр | space-between | space-around | stretch

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

align-content
order

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

order 1

flex-grow

Застосовується до дочірнього елемента/flex-елемента. Визначає для flex-елемента можливість «рости» за потреби.Приймає безрозмірне значення, служить як пропорція.Воно визначає, яку частку вільного місця всередині контейнера може зайняти елемент. Якщо у всіх елементів властивість flex-grow встановлено як 1, то кожен нащадок отримає всередині контейнера однаковий розмір.Якщо ви задали одному з нащадків значення 2, він займе вдвічі більше місця, ніж інші.

flex-grow (за замовчуванням 0)

flex-shrink

Застосовується до дочірнього елемента/flex-елемента.

Визначає для flex-елемента можливість при необхідності стискатися.

flex-shrink (default 1)

Негативні числа не приймаються.
flex-basis

Застосовується до дочірнього елемента/flex-елемента. Визначає розмір за замовчуванням елемента перед розподілом простору в контейнері.

flex-basis | auto (default auto)

flex

Застосовується до дочірнього елемента/flex-елемента. Це скорочення для flex-grow, flex-shrink та flex-basis.Другий та третій параметри (flex-shrink, flex-basis) необов'язкові.Значення за замовчуванням – 0 1 auto.

flex: none | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]

align-self

Застосовується до дочірнього елемента/flex-елемента. Дозволяє перевизначити вирівнювання, задане за замовчуванням або в align-items, для окремих flex-елементів. Зверніться до опису якості align-items для кращого розуміння доступних значень.

align-self: auto | flex-start flex-end центр | Baseline | stretch

Приклади
Почнемо з простого прикладу, зустрічається практично щодня: вирівнювання точно по центру.Немає нічого простішого, якщо використовувати flexbox.

Parent ( display: flex; height: 300px; ) .child ( width: 100px; / * Або що завгодно * / height: 100px; / * Або що завгодно * / margin: auto; / * Магія! * / )

Цей приклад ґрунтується на тому, що margin під flex-контейнері, заданий як auto, поглинає зайвий простір, тому завдання відступу таким чином вирівняє елемент рівно по центру по обох осях. Тепер давайте використовуємо якісь властивості.Уявіть набір із 6 елементів фіксованого розміру (для краси), але з можливістю зміни розміру контейнера.Ми хочемо рівномірно розподілити їх по горизонталі, щоб при зміні розміру вікна браузера виглядало добре (без @media-запитів!).

Flex-container (
/ * Спочатку створимо flex-контекст * /
display: flex;

/ * Тепер визначимо напрямок потоку і чи хочемо ми, щоб елементи
переносилися на новий рядок
* Пам'ятайте, що це те саме, що і:
* Flex-direction: row;
* Flex-wrap: wrap;
* /
flex-flow: row wrap;

/ * Тепер визначимо, як розподілятиметься простір * /
}

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

/ * Великі екрани * /
.navigation (
display: flex;
flex-flow: row wrap;
/ * Зсуває елементи до кінця рядка по головній осі * /
justify-content: flex-end;
}

media all and (max-width: 800px) (
.navigation (
/ * Для екранів середнього розміру ми вирівнюємо навігацію по центру,
рівномірно розподіляючи вільне місце між елементами * /
justify-content: space-around;
}
}

/ * Маленькі екрани * /
media all and (max-width: 500px) (
.navigation (
/ * На маленьких екранах замість рядка ми маємо елементи в стовпці * /
flex-direction: column;
}
}

Давайте пограємо із гнучкістю flex-елементів!Як щодо орієнтованого на мобільні пристрої триколонкового макета з повноширинною шапкою та підвалом?І іншим порядком розташування.

Wrapper (
display: flex;
flex-flow: row wrap;
}

/ * Задаємо всім Елемети ширину в 100% * /
.header, .main, .nav, .aside, .footer (
flex 1100%;
}

/ * У цьому випадку ми покладаємося на вихідний порядок для орієнтації на
* Мобільні пристрої:
* 1 header
* 2 nav
* 3 main
* 4 aside
* 5 footer
* /

/ * Екрани середнього розміру * /
media all and (min-width: 600px) (
/ * Обидва сайдбари розташовуються в одному рядку * /
.aside (flex: 1 auto; )
}

/ * Великі екрани * /

Якщо говорити коротко, то верстка з Flexbox дає нам прості рішенняколись непростих завдань. Наприклад, коли потрібно вирівняти елемент по вертикалі, або притиснути підвал до низу екрана, або просто вставити кілька блоків в один ряд, так щоб вони займали весь простір. Подібні завдання вирішуються без flex. Але, як правило, ці рішення більше схожі на «милиці» - прийоми використовувати css не за призначенням. Тоді як із flexbox такі завдання вирішуються саме так, як замислює flex-модель.

CSS Flexible Box Layout Module (CSS модуль для макетів з гнучкими блоками), коротко flexbox, створена, щоб прибрати недоліки при створенні різних HTML конструкцій, у тому числі адаптованих під різну ширину і висоту, і зробити верстку логічною і простою. А логічний підхід, як правило, працює в несподіваних місцях, там де результат не перевірявся - логіка наше все!

Flexbox дозволяє елегантно контролювати різні параметри елементів всередині контейнера: напрям, порядок, ширину, висоту, вирівнювання вздовж і поперек, розподіл вільного місця, розтягування і стиснення елементів.

Базові знання

FlexBox складається з Контейнера та його Дочірніх елементів (items) (гнучких елементів).

Для включення flexbox, будь-якому HTML елементу достатньо присвоїти css властивість display:flex; або display: inline-flex; .

Після включення flex властивості, усередині контейнера утворюються дві осі: головна та поперечна (перпендикулярна (⊥), крос вісь). Всі вкладені елементи (першого рівня) шикуються по головній осі. За умовчанням головна вісь горизонтальна і має напрямок зліва направо (→), а крос вісь відповідно вертикальна і спрямована зверху донизу (↓).

Головну і крос осі можна поміняти місцями, тоді елементи будуть розташовуватися зверху вниз (↓) і коли перестануть вміщатися у висоту, то рухатимуться зліва направо (→) - тобто осі просто помінялися місцями. При цьому початок і кінець розташування елементів не змінюється – змінюються лише напрямки (осі)! Саме тому потрібно уявляти осі всередині контейнера. Однак не треба думати, що є якісь там «фізичні» осі, і вони на щось впливають. Ось тут - це тільки напрямок руху елементів усередині контейнера. Наприклад, якщо ми вказали вирівнювання елементів по центру основної осі і потім змінили напрямок цієї основної осі, то зміниться і вирівнювання: елементи були в середині по горизонталі, а стали в середині по вертикалі... Див. приклад.

Ще однією важливою особливістю Флекс-бокс є наявність рядів у поперечному напрямку. Щоб зрозуміти про що мова, давайте уявімо, що є головна горизонтальна вісьбагато елементів і вони не «лізуть» у контейнер, тому переходять на інший ряд. Тобто. контейнер виглядає так: контейнер, усередині нього два ряди, у кожному ряді по кілька елементів. Уявили? А тепер запам'ятайте, що вирівнювати по вертикалі ми можемо не лише елементи, а й лави! Як це працює добре видно з прикладу до властивості. А ось так це виглядає схематично:

CSS властивості, які можуть впливати на модель побудови макета: float, clear, vertical-align, columns не працюють у flex конструкції. Тут використовується інша модель побудови макета, і ці css властивості просто ігноруються.

CSS властивості Flexbox

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

Для контейнера

Включає flex властивість елемента. Під цю властивість потрапляє сам елемент і вкладені у нього елементи: зачіпаються лише нащадки першого рівня - вони стануть елементами flex контейнера.

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

flex і inline-flex відрізняються тим, що по-різному взаємодіють з навколишніми елементами, подібно display:block і display:inline-block .

Змінює напрямок головної осі контейнера. Поперечна вісь змінюється відповідно.

• row (default)- Напрямок елементів зліва направо (→)
• column- Напрямок елементів зверху вниз (↓)
• row-reverse- Напрямок елементів праворуч наліво (←)
• column-reverse- Напрямок елементів знизу вгору ()

Керує перенесенням елементів, що не поміщаються в контейнер.

• nowrap (default)- Вкладені елементи розташовуються в один ряд (при direction=row) або в одну колонку (при direction=column) незалежно від того, поміщаються вони в контейнер чи ні.
• wrap- включає перенесення елементів на наступний ряд, якщо вони не містяться у контейнері. Так включається рух елементів поперечної осі.
• wrap-reverse- теж, що wrap тільки перенесення буде не вниз, а вгору (у зворотному напрямку).

Поєднує обидві властивості flex-direction та flex-wrap. Вони часто використовуються разом, тому щоб писати менше коду було створено властивість flex-flow.

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

/* Тільки flex-direction */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* тільки flex-wrap */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* відразу обидва значення: flex-direction та flex-wrap */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; justify-content:

Вирівнює елементи по осі: якщо direction=row, то по горизонталі, а якщо direction=column, то по вертикалі.

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

Вирівнює ряди, в яких знаходяться елементи поперечної осі. Те саме, що є justify-content тільки для протилежної осі.

Примітка: Працює коли є щонайменше 2 ряди, тобто. за наявності лише 1 ряду нічого не станеться.

Тобто. якщо flex-direction: row, то ця властивість вирівнюватиме невидимі ряди по вертикалі. Тут важливо помітити, що висота блоку має бути задана жорстко і має бути більше висоти рядів інакше самі ряди розтягуватимуть контейнер і будь-яке їхнє вирівнювання втрачає сенс, тому що між ними немає вільного місця... А ось коли flex-direction: column , то ряди рухається по горизонталі → і ширина контейнера майже завжди більша за ширину рядів і вирівнювання рядів відразу набуває сенсу.

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

Вирівнює елементи поперечної осі всередині ряду (невидимого рядка). Тобто. самі ряди вирівнюються через align-content , а елементи всередині цих рядів (рядків) через align-items і це по поперечної осі. По головній осі такого поділу немає, там немає поняття рядів та елементи вирівнюються через justify-content.

• stretch (default)- елементи розтягуються заповнюючи рядок повністю
• flex-start- елементи притискаються до початку ряду
• flex-end- елементи притискаються до кінця ряду
• center- Елементи вирівнюються по центру ряду
• baseline- елементи вирівнюються за базовою лінією тексту

Для елементів контейнера

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

За замовчуванням flex-grow: 0

• Якщо всім елементам вказати flex-grow:1 , всі вони розтягнутися однаково і заповнювати все вільне місце в контейнері.
• Якщо одному з елементів вказати flex-grow:1 , то він заповнить все вільне місце в контейнері і вирівнювання через justify-content працювати вже не будуть: вільного місця немає нічого вирівнювати.
• При flex-grow:1. Якщо один з них має flex-grow:2, то він буде в 2 рази більше, ніж усі інші
• Якщо всі flex-блоки всередині flex-контейнера мають flex-grow:3, то вони будуть однакового розміру
• При flex-grow:3. Якщо один з них має flex-grow:12 , то він буде вчетверо більше, ніж усі інші

Як це працює? Припустимо, що контейнер має ширину 500px і містить два елементи, кожен із яких має базову ширину 100px. Значить у контейнері залишається 300 вільних пікселів. Тепер якщо першому елементу вкажемо flex-grow:2; а другому flex-grow: 1; блоки займуть всю доступну ширину контейнера і ширина першого блоку буде 300px, а другого 200px. Пояснюється це тим, що доступні 300px вільного місця у контейнері розподілилися між елементами у співвідношенні 2:1, +200px першому та +100px другому.

Примітка: у значенні можна вказувати дробові числанаприклад: 0.5 - flex-grow:0.5

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

Типово flex-shrink:1

Припустимо, що контейнер має ширину 600px і містить два елементи, кожен із яких має ширину 300px - flex-basis:300px; . Тобто. два елементи повністю заповнюють контейнер. Першому елементу вкажемо flex-shrink: 2; а другому flex-shrink: 1; . Тепер зменшимо ширину контейнера на 300px, тобто. елементи повинні стиснутися на 300px щоб бути всередині контейнера. Стискатимуться у співвідношенні 2:1, тобто. перший блок стиснеться на 200px, а другий на 100px і нові розміри елементів стануть 100px та 200px.

Примітка: у значенні можна вказувати дробові числа, наприклад: 0.5 - flex-shrink:0.5

Встановлює базову ширину елемента - ширину перед тим, як будуть вираховані інші умови які впливають ширину елемента. Значення можна вказати px, em, rem, %, vw, vh і т.д. Підсумкова ширина залежатиме від базової ширини та значень flex-grow, flex-shrink та контенту всередині блоку. При auto елемент отримує базову ширину щодо контенту всередині нього.

Типово: auto

Іноді краще встановити ширину елемента жорстко через звичну властивість width. Наприклад, width: 50%; буде означати, що елемент усередині контейнера буде рівно 50%, проте при цьому будуть працювати властивості flex-grow і flex-shrink. Таке може бути необхідне, коли елемент розтягується контентом усередині нього, більше зазначеного у flex-basis. Приклад.

flex-basis буде «жорстким», якщо обнулити розтягування та стиск: flex-basis: 200px; flex-grow:0; flex-shrink:0; . Все це можна записати так flex:0 0 200px; .

Короткий запис трьох властивостей: flex-grow flex-shrink flex-basis.

Типово: flex: 0 1 auto

Однак можна вказати і одне, і два значення:

Flex: none; /* 0 0 auto */ /* число */ flex: 2; /* flex-grow (flex-basis переходить у 0) */ /* не число */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* flex-basis: content */ flex: 1 30px; /* flex-grow та flex-basis */ flex: 2 2; /* flex-grow та flex-shrink (flex-basis переходить у 0) */ flex: 2 2 10%; /* flex-grow та flex-shrink та flex-basis */ align-self:

Дозволяє змінити властивість align-items лише для окремого елемента.

За замовчуванням: контейнер від align-items

• stretch- елемент розтягуються заповнюючи рядок повністю
• flex-start- елемент притискаються до початку рядка
• flex-end- елемент притискаються до кінця рядка
• center- елемент вирівнюються по центру рядка

baseline- елемент вирівнюються за базовою лінією тексту

Дозволяє змінювати порядок (позицію, становище) елемента у загальному ряду.

За замовчуванням: order: 0

За замовчуванням елементи мають order: 0 і ставляться порядку їх появи в HTML коді та напрями ряду. Але якщо змінити значення властивості order, то елементи вибудовуватимуться в порядку значень: -1 0 1 2 3 ... . Наприклад, якщо одному з елементів вказати order: 1 , то спочатку будуть йти всі нульові, а потім елемент з 1.

Так можна, наприклад, перший елемент перекинути в кінець, при цьому не змінюючи напрямок руху інших елементів або HTML код.

нотатки

Чим відрізняється flex-basis від width?

Нижче важливі відмінності між flex-basis та width/height:

flex-basis працює лише для головної осі. Це означає, що при flex-direction:row flex-basis контролює ширину (width), а при flex-direction:column контролює висоту (height). .

flex-basis застосовується лише до flex елементів. А значить якщо відключити flex у контейнера ця властивість не матиме ефекту.

Абсолютні елементи контейнера не беруть участь у flex конструкції... Отже, flex-basis не впливає елементи flex контейнера, якщо вони абсолютні position:absolute . Їм потрібно буде вказати width/height.

• При використанні flex 3 значення (flex-grow/flex-shrink/flex-basis) можна скомбінувати і записати коротко, а для width grow або shrink потрібно писати окремо. Наприклад: flex:0 0 50% == width:50%; flex-shrink:0; . Іноді це незручно.

По можливості все ж таки віддавайте перевагу flex-basis . Використовуйте width тільки коли не підходить flex-basis.

Відмінність flex-basis від width - баг чи фіча?

Контент всередині flex елемент розпирає його і не може вийти за його межі. Однак якщо встановити ширину через width або max-width, а не flex-basis, то елемент усередині flex контейнера зуміє вийти за межі цього контейнера (іноді потрібна саме така поведінка). Приклад:

Приклади Flex верстки

У прикладах ніде не використовуються префікси для кроссбраузерності. Я зробив так для зручного читання css. Тому приклади дивіться у останніх версіях Chrome чи Firefox.

#1 Простий приклад з вирівнюванням по вертикалі та горизонталі

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

Або так, без блоку всередині:

#1.2 Поділ (розрив) між елементами флекс блоку

Щоб розташувати елементи контейнера по краях і довільно вибрати елемент, після якого буде розрив, потрібно використовувати властивість margin-left:auto або margin-right:auto .

#2 Адаптивне меню на flex

Зробимо меню у самому верху сторінки. На широкому екрані воно має бути праворуч. На середньому вирівнюватись посередині. А на маленькому кожен елемент має бути на новому рядку.

#3 Адаптивні 3 колонки

Цей приклад показує як швидко і зручно зробити 3 колонки, які при звуженні будуть перетворюватися на 2 і потім на 1.

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

Перейдіть до jsfiddle.net та змінюйте ширину секції «результат»

#4 Адаптивні блоки на flex

Допустимо нам потрібно вивести 3 блоки, один великий і два маленькі. При цьому потрібно, щоб блоки підлаштовувалися під маленькі екрани. Робимо:

Перейдіть до jsfiddle.net та змінюйте ширину секції «результат»

#5 Галерея на flex та transition

Цей приклад показує, як швидко можна зробити симпатичний акордеон з картинками на flex. Зверніть увагу на властивість transition для flex.

#6 Флекс у флекс (просто приклад)

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

Для вирішення цього завдання самі блоки розтягуються флексом і їм встановлена ​​максимально можлива ширина. Кожен внутрішній блок є флекс конструкцією, з поверненою віссю flex-direction:column; і елемент усередині (де знаходиться текст) розтягується flex-grow:1; щоб заповнити весь вільний простір, так досягається результат - текст починався з однієї лінії.

Ще приклади

Підтримка браузерами – 98.3%

Повної підтримки очевидно немає, але всі сучасні браузери підтримують flexbox конструкції. Для деяких досі потрібно вказувати префікси. Для реальної картини заглянемо в caniuse.com і бачимо, що без префіксів працюватимуть 96.3% браузерів, що використовуються сьогодні, з префіксами 98.3%. Це відмінний показник для того, щоб сміливо використовувати flexbox.

Щоб знати, які префікси актуальні на сьогодні (червень. 2019), наведу приклад усіх flex правил з потрібними префіксами:

/* Контейнер */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -flex-flow:column wrap; flex-flow:column wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; distribute; align-content:space-around; ) /* Елементи */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negative:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; :center;align-self:center;-webkit-box-ordinal-group:3; -ms-flex-order:2; order:2;

Краще, якщо властивості з префіксами будуть йти до оригінальної властивості.
У цьому списку немає непотрібних на сьогодні (з caniuse) префіксів, але взагалі префіксів більше.

• (new) – новий синтаксис: display: flex; .
• (tweener) – старий неофіційний синтаксис 2011 року: display: flexbox; .
• (old) – старий синтаксис 2009 року: display: box;

Відео

Ну і не забувайте про відео, там часом теж цікаво та зрозуміло. Ось парочка популярних:

Корисні посилання по Flex

flexboxfroggy.com - гра навчальна flexbox.

Flexplorer – наочний конструктор flex коду.

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

У багатьох редакторів коду за замовчуванням вбудований, або доступний для завантаження зручний плагін для швидкої розмітки Emmet, він дозволяє зробити основну розмітку цього прикладу наступним чином: section>div*3>lorem+ Tab (значення loremгенерує текст, що є на зображенні нижче).

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

не є за замовчуванням флекс елементами та розташовані в потоці третьогоелемента