1. основи
2. властивості
3. flex-direction
4. flex-wrap
5. flex-flow
6. justify-content
7. align-items
8. align-content
9. order
10. flex-grow
11. flex-shrink
12. flex-basis
13. flex
14. align-self
15. приклади
16. Схожі властивості

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

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

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

Зауваження: Flexbox-лейаут найкраще підходить для складових частин програми та дрібномасштабних лейаутов, в той час як Grid -лейаут більше використовується для лейаутов великого масштабу.

основи

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

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

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

• main-axis - головна вісь, уздовж якого розташовуються flex-елементи. Зверніть увагу, вона необов'язково повинна бути горизонтальною, все залежить від якості flex-direction (див. Нижче).
• 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-контейнер (інлайновий або блоковий в залежності від обраного значення), підключає 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 | center | space-between | space-around

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

align-items

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

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

align-items: flex-start | flex-end | center | baseline | stretch

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

align-content

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

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

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

align-content: flex-start | flex-end | center | space-between | space-around | stretch

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

order

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

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

order: <integer>

flex-grow

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

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

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

flex-grow: <number> (за умовчанням 0)

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

flex-shrink

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

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

flex-shrink: <number> (default 1)

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

flex-basis

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

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

flex-basis: <length> | 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 | center | baseline | stretch

приклади

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

.parent {display: flex; height: 300px; } .Child {width: 100px; height: 100px; margin: auto; }

Цей приклад ґрунтується на тому, що margin у flex-контейнері, заданий як auto, поглинає зайвий простір, тому завдання відступу таким чином вирівняє елемент рівно по центру по обох осях.

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

.flex-container {display: flex; flex-flow: row wrap; justify-content: space-around; }

Готово. Все інше - вже справа оформлення. Нижче розміщений CodePen, що демонструє цей приклад. Обов'язково спробуйте розтягнути / стиснути вікно браузера і подивіться, що станеться.

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

.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; }} Check out this Pen!

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

.wrapper {display: flex; flex-flow: row wrap; } .Header, .main, .nav, .aside, .footer {flex 1 100%; } @ Media all and (min-width: 600px) {.aside {flex: 1 auto; }} @ Media all and (min-width: 800px) {.main {flex: 2 0px; } .Aside-1 {order: 1; } .Main {order: 2; } .Aside-2 {order: 3; } .Footer {order: 4; }} Check out this Pen!

Схожі властивості

інші ресурси

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

• (Modern) означає підтримку нового синтаксису з специфікації (display: flex;)
• (Hybrid) означає підтримку старого неофіційного синтаксису з 2011 року (display: flexbox;)
• (Old) означає підтримку старого синтаксису з 2009 (display: box;)

Chrome Safari Firefox Opera IE Android iOS 21+ (modern)
20 (old) 3.1+ (old) 2-21 (old)
22+ (new) 12.1+ (modern) 10+ (hybrid) 2.1 + (old) 3.2+ (old)

Браузер Blackberry версії 10+ підтримує новий синтаксис.

Для більш докладної інформації про те, як і коли використовувати різні синтаксиси для забезпечення кращої підтримки браузерами, зверніться до цієї статті (CSS-Tricks) або цієї статті (DevOpera) .

SASS- @ mixin для полегшення болю:

@ Mixin flexbox () {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @ Mixin flex ($ values) {-webkit-box- flex: $ values; -moz-box- flex: $ values; -webkit- flex: $ values; -ms- flex: $ values; flex: $ values; } @ Mixin order ($ val) {-webkit-box-ordinal-group: $ val; -moz-box-ordinal-group: $ val; -ms- flex -order: $ val; -webkit- order: $ val; order: $ val; } .Wrapper {@ include flexbox (); } .Item {@ include flex (1 200px); @ Include order (2); }