CSS3 flexbox - опис всіх властивостей модуля, приклади верстки
- підтримка браузерами
- 1. Основні поняття
- 2. Flex-контейнер
- 3. Flex-елементи
- 4. Порядок відображення flex-елементів та орієнтація
- 4.1. Напрямок головної осі: flex-direction
- 4.2. Управління багаторядкова flex-контейнера: flex-wrap
- 4.3. Короткий запис напрямки і багаторядкова: flex-flow
- 4.4. Порядок відображення flex-елементів: order
- 5. Гнучкість flex-елементів
- 5.1. Завдання гнучких розмірів одним властивістю: flex
- 5.2. Коефіцієнт зростання: flex-grow
- 5.3. Коефіцієнт стиснення: flex-shrink
- 5.4. Базовий розмір: flex-basis
- 6. Вирівнювання
- 6.2. Вирівнювання по поперечної осі: align-items і align-self
- 6.2.1. Align-items
- 6.2.2. Align-self
- 6.3. Вирівнювання рядків flex-контейнера: align-content
CSS flexbox (Flexible Box Layout Module) - модуль макета гнучкого контейнера - являє собою спосіб компонування елементів, в основі лежить ідея осі.
Flexbox складається з гнучкого контейнера (flex container) і гнучких елементів (flex items). Гнучкі елементи можуть вибудовуватися в рядок або стовпчик, а вільний простір розподіляється між ними різними способами.
Модуль flexbox дозволяє вирішувати наступні завдання:
- Розташовувати елементи в одному з чотирьох напрямків: зліва направо, справа наліво, зверху вниз або знизу вгору.
- Перевизначати порядок відображення елементів.
- Автоматично визначати розміри елементів таким чином, щоб вони вписувалися в доступне простір.
- Вирішувати проблему з горизонтальним і вертикальним центрированием.
- Переносити елементи всередині контейнера, не допускаючи його переповнення.
- Створювати колонки однакової висоти.
- Створювати притиснутий до низу сторінки підвал сайту .
Flexbox вирішує специфічні завдання - створення одновимірних макетів, наприклад, навігаційної панелі, так як flex-елементи можна розміщувати тільки по одній з осей.
Список поточних проблем модуля і крос-браузерних рішень для них ви можете прочитати в статті Philip Walton Flexbugs .
підтримка браузерами
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 for Android: 44
1. Основні поняття
Мал. 1. Модель flexbox
Для опису модуля 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. Режим рядки і колонки
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-елементом, шикуючись в один ряд (уздовж головної осі). При цьому блокові і малі дочірні елементи поводяться однаково, тобто ширина блоків дорівнює ширині їх вмісту з урахуванням внутрішніх полів і рамок елемента.
Мал. 3. Вирівнювання елементів в моделі flexbox
Якщо батьківський блок містить текст або зображення без обгорток, вони стають анонімними 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-direction Значення: row Значення за замовчуванням, зліва направо (в rtl справа наліво). Flex-елементи викладаються в рядок. Початок (main-start) і кінець (main-end) напрямки головної осі відповідають початку (inline-start) і кінця (inline-end) інлайн-осі (inline-axis). row-reverse Напрямок справа наліво (в rtl зліва направо). Flex-елементи викладаються в рядок щодо правого краю контейнера (в rtl - лівого). column Напрямок зверху вниз. Flex-елементи викладаються в колонку. column-reverse Колонка з елементами в зворотному порядку, від низу до верху. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента. Мал. 4. Властивість flex-direction для left-to-right мов
синтаксис
.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-wrap Значення: nowrap Значення за замовчуванням. Flex-елементи не переносяться, а розташовуються в одну лінію зліва направо (в rtl справа наліво). wrap Flex-елементи переносяться, розташовуючись в кілька горизонтальних рядів (якщо не поміщаються в один ряд) в напрямку зліва направо (в rtl справа наліво). wrap-reverse Flex-елементи переносяться на нові лінії, розташовуючись в зворотному порядку зліва-направо, при цьому перенесення відбувається знизу вгору. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента. Мал. 5. Управління багаторядкова за допомогою властивості flex-wrap для LTR-мов
синтаксис
.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-flow Значення: напрямок Вказує напрямок головної осі. Значення за замовчуванням row. багаторядкова Задає багаторядкова поперечної осі. Значення за замовчуванням nowrap. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента.
синтаксис
.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, вони будуть відображатися відповідно до вихідним порядком.
order Значення: число Властивість задається цілим числом, що відповідає за порядок відображення flex-елементів. Значення за замовчуванням 0. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента.
синтаксис
.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 ;. Можна вказувати як одне, так і всі три значення властивостей. Властивість не успадковується.
W3C рекомендує використовувати скорочену запис, так як вона правильно скидає будь невказані компоненти, щоб підлаштуватися під типове використання.
flex Значення: коефіцієнт розтягування Коефіцієнт збільшення ширини flex-елемента щодо інших flex-елементів. коефіцієнт звуження Коефіцієнт зменшення ширини flex-елемента щодо інших flex-елементів. базова ширина Базова ширина flex-елемента. auto Еквівалентно flex: 1 + 1 auto ;. none Еквівалентно flex: 0 0 auto ;. initial Встановлює значення властивості в значення за замовчуванням. Еквівалентно flex: 0 1 auto ;. inherit Успадковує значення властивості від батьківського елемента.
синтаксис
.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-grow Значення: число Позитивне ціле або дробове число, яке встановлює коефіцієнт зростання flex-елемента. Значення за замовчуванням 0. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента. Мал. 7. Управління вільним простором в панелі навігації за допомогою flex-grow
синтаксис
.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-shrink Значення: число Позитивне ціле або дробове число, яке встановлює коефіцієнт зменшення flex-елемента. Значення за замовчуванням 1. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента. Мал. 8. Звуження 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-basis Значення: auto Значення за замовчуванням. Елемент отримує базовий розмір, який відповідає розміру його вмісту (якщо він не заданий явно). content Визначає базовий розмір в залежності від вмісту flex-елемента. довжина Базовий розмір визначається так само, як для ширини і висоти. Здається в одиницях довжини. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента.
синтаксис
.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 ;, властивість не буде впливати. Властивість не успадковується.
justify-content Значення: flex-start Значення за замовчуванням. Flex-елементи викладаються в напрямку, що йде від початкової лінії flex-контейнера. flex-end Flex-елементи викладаються в напрямку, що йде від кінцевої лінії flex-контейнера. center Flex-елементи вирівнюються по центру flex-контейнера. space-between Flex-елементи рівномірно розподіляються по лінії. Перший flex-елемент поміщається врівень з краєм початкової лінії, останній flex-елемент - врівень з краєм кінцевої лінії, а решта flex-елементи на лінії розподіляються так, щоб відстань між будь-якими двома сусідніми елементами було однаковим. Якщо вільний простір негативно або в рядку присутній тільки один flex-елемент, це значення ідентично параметру flex-start. space-around Flex-елементи на лінії розподіляються так, щоб відстань між будь-якими двома суміжними flex-елементами було однаковим, а відстань між першим / останнім flex-елементами і краями flex-контейнера становило половину від відстані між flex-елементами. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента. Мал. 9. Вирівнювання елементів і розподіл вільного простору за допомогою властивості justify-content
синтаксис
.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-елементи по поперечної осі. Чи не успадковується.
align-items Значення: flex-start Верхній край flex-елемента міститься впритул з flex-лінією (або на відстані, з урахуванням заданих полів margin і рамок border елемента), що проходить через початок поперечної осі. flex-end Нижній край flex-елемента міститься впритул з flex-лінією (або на відстані, з урахуванням заданих полів margin і рамок border елемента), що проходить через кінець поперечної осі. center Поля flex-елемента центрується по поперечної осі в межах flex-лінії. baseline Базові лінії всіх flex-елементів, що беруть участь у вирівнюванні, збігаються. stretch Якщо поперечний розмір flex-елемента обчислюється як auto і жодне з поперечних значень margin не дорівнює auto, елемент розтягується. Значення за замовчуванням. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента. Мал. 10. Вирівнювання елементів в контейнері по вертикалі
синтаксис
.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. Чи не успадковується.
align-self Значення: auto Значення за замовчуванню. Flex-елемент вікорістовує вірівнювання, зазначеним у Властивості align-items flex-контейнера. flex-start Верхній край flex-елемента містіться впрітул з flex-лінією (або на відстані, з урахуванням завдань полів margin и рамок border елемента), что проходити через початок поперечної осі. flex-end Нижній край flex-елемента містіться впрітул з flex-лінією (або на відстані, з урахуванням завдань полів margin и рамок border елемента), что проходити через кінець поперечної осі. center Поля flex-елемента центрується по поперечної осі в межах flex-Лінії. baseline Flex-елемент вірівнюється по базовій Лінії. stretch Якщо поперечний розмір flex-елемента обчислюється як auto і жодне з поперечних значень margin не дорівнює auto, елемент розтягується. Значення за замовчуванням. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента. Мал. 11. Вирівнювання окремих flex-елементів
синтаксис
.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-контейнер. Чи не успадковується.
align-content Значення: flex-start Рядки укладаються у напрямку до початку flex-контейнера. Край першого рядка поміщається впритул до краю flex-контейнера, кожна наступна - впритул до попереднього рядка. flex-end Рядки укладаються у напрямку до кінця flex-контейнера. Край останнього рядка поміщається впритул до краю flex-контейнера, кожна попередня - впритул до подальшої рядку. center Рядки укладаються у напрямку до центру flex-контейнера. Рядки розташовані впритул один до одного і вирівняні по центру flex-контейнера з рівною відстанню між початковим краєм вмісту flex-контейнера і першим рядком і між кінцевим краєм вмісту flex-контейнера і останнім рядком. space-between Рядки рівномірно розподілені в flex-контейнері. Якщо вільний простір негативно або в flex-контейнері є тільки одна flex-лінія, це значення ідентично flex-start. В іншому випадку край першого рядка поміщається впритул до початкового краю вмісту flex-контейнера, край останнього рядка - впритул до кінцевого краю вмісту flex-контейнера. Решта рядків розподілені так, щоб відстань між будь-якими двома сусідніми рядками було однаковим. space-around Рядки рівномірно розподілені в flex-контейнері з половинним пропуском на обох кінцях. Якщо вільний простір негативно, це значення ідентично центcenter. В іншому випадку рядки розподіляються таким чином, щоб відстань між будь-якими двома сусідніми рядками було однаковим, а відстань між першою / останньою рядками і краями вмісту flex-контейнера становило половину від відстані між рядками. stretch Значення за замовчуванням. Рядки flex-елементів рівномірно розтягуються, заповнюючи весь доступний простір. Якщо вільний простір негативно, це значення ідентично flex-start. В іншому випадку вільний простір буде розділено порівну між усіма рядками, збільшуючи їх поперечний розмір. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента. Мал. 12. багаторядкова вирівнювання 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; }
за матеріалами CSS Flexible Box Layout Module Level 1