• Главная
  • Карта сайта
Не найдено

CSS3 flexbox - опис всіх властивостей модуля, приклади верстки

  1. підтримка браузерами
  2. 1. Основні поняття
  3. 2. Flex-контейнер
  4. 3. Flex-елементи
  5. 4. Порядок відображення flex-елементів та орієнтація
  6. 4.1. Напрямок головної осі: flex-direction
  7. 4.2. Управління багаторядкова flex-контейнера: flex-wrap
  8. 4.3. Короткий запис напрямки і багаторядкова: flex-flow
  9. 4.4. Порядок відображення flex-елементів: order
  10. 5. Гнучкість flex-елементів
  11. 5.1. Завдання гнучких розмірів одним властивістю: flex
  12. 5.2. Коефіцієнт зростання: flex-grow
  13. 5.3. Коефіцієнт стиснення: flex-shrink
  14. 5.4. Базовий розмір: flex-basis
  15. 6. Вирівнювання
  16. 6.2. Вирівнювання по поперечної осі: align-items і align-self
  17. 6.2.1. Align-items
  18. 6.2.2. Align-self
  19. 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. Основні поняття

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

Мал. 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 Успадковує значення властивості від батьківського елемента. flex-direction Значення: row Значення за замовчуванням, зліва направо (в rtl справа наліво) Мал. 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 Успадковує значення властивості від батьківського елемента. flex-wrap Значення: nowrap Значення за замовчуванням Мал. 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; } flex-container {display: -webkit-flex;  display: flex;  } Мал. 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 Успадковує значення властивості від батьківського елемента. flex-grow Значення: число Позитивне ціле або дробове число, яке встановлює коефіцієнт зростання flex-елемента Мал. 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 Успадковує значення властивості від батьківського елемента. flex-shrink Значення: число Позитивне ціле або дробове число, яке встановлює коефіцієнт зменшення flex-елемента Мал. 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 Успадковує значення властивості від батьківського елемента. justify-content Значення: flex-start Значення за замовчуванням Мал. 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 Успадковує значення властивості від батьківського елемента. align-items Значення: flex-start Верхній край flex-елемента міститься впритул з flex-лінією (або на відстані, з урахуванням заданих полів margin і рамок border елемента), що проходить через початок поперечної осі Мал. 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 Успадковує значення властивості від батьківського елемента. align-self Значення: auto Значення за замовчуванню Мал. 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 Успадковує значення властивості від батьківського елемента. align-content Значення: flex-start Рядки укладаються у напрямку до початку flex-контейнера Мал. 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

Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью