Flexbox приклади верстки. Практичне застосування FlexBox. Напрямок головної осі: flex-direction

Я хотів би розповісти про 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 \u200b\u200b| 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: елементи розподіляються рівномірно з рівною відстанню між собою і поза рядки.

justify-content
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 (за замовчуванням): елементи растягіваютcя, заповнюючи контейнер (з урахуванням min-width / max-width).

align-items
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 (за замовчуванням): рядки розтягуються, заповнюючи вільний простір.

align-content
order

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

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 | center | 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 це зручна технологія верстки, яка може стати незамінним інструментом для побудови HTML шаблонів.

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

Розробники протягом довгого часу використовували для верстки таблиці, float-елементи, inline-block і інші CSS властивості, щоб надати блокам потрібне розташування. Прості речі, як вертикальне центрування, здійснювалися досить складно. Створення ж макета на основі гнучких сіток вважається грамотної практикою, ось чому широкого поширення набули CSS-фреймворки на основі сіток.

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

Основна специфікація CSS Flexible Box Layout Module (Або просто Flexbox) - дає відмінні інструменти для вирішення великої кількості різноманітних завдань. Flexbox дає можливість тримати під контролем розмір, порядок і вирівнювання елементів по декількох осях. Також можна контролювати розподіл вільного місця між елементами і багато іншого.

Flexbox має ряд переваги:

1. Сама назва "flex" дає зрозуміти, що все блоки дуже легко можна зробити гнучкими. Необхідні елементи можна стиснути і розтягнути за спеціальними правилами, зайнявши таким чином все потрібне простір.
2. Базова лінія тексту легко вирівнюється по вертикалі і горизонталі.
3. Порядок розташування елементів в шаблоні не грає вирішальну роль. При необхідності його можна поміняти в стилях, що є особливо важливим для деяких аспектів адаптивної верстки.
4. Для заповнення всього наданого місця елементи можуть автоматично вишикуватися в кілька рядків або стовпців.
5. Більшість мов світу мають форму написання справа-наліво rtl (right-to-left), на відміну від звичного нам ltr (left-to-right). Особливість f lexbox полягає в тому, що він адаптований для цього, так як для нього є поняття початку і кінця, а не права і ліва. У браузерах з налаштуванням rtl всі елементи автоматично розташовуються в реверсному порядку.
6. Синтаксис правил CSS інтуїтивно простий і досить швидко освоюється.

Історія Flexbox

• 2008 рік - CSS Working Group проводить обговорення програми "Flexible Box Model", заснованого на XUL (XML User Interface Language - мова розмітки в додатках Mozilla) and XAML (Extensible Application Markup Language - мова розмітки для додатків Microsoft).
• 2009 рік - опубліковано чернетку "Flexible Box Layout Module". Chrome і Safari додають часткову підтримку, в той час, коли Mozilla починає підтримувати XUL-подібний синтаксис, відомий як "Flexbox 2009". Якщо, під час читання блог-поста або пошуку інформації про Flexbox з будь-якого іншого джерела, вам потрапляти такі вирази як display: box; або властивості подібні box - (*), то це означає, що перед вами застаріла версія Flexbox, зразка 2009 року.
• 2011 рік - Tab Atkins береться за розвиток Flexbox і публікує 2 чернетки. В даних чернетках синтаксис значно змінюється. Chrome, Opera і IE 10 впроваджують підтримку даного синтаксису, відомого під назвою "flexbox 2011".
• 2012 рік - синтаксис знову змінюється і уточнюється. Специфікація отримує статус Candidate Recommendation і стає відома під назвою "flexbox 2012". Opera впроваджує беспрефіксную підтримку, Chrome підтримує поточну специфікацію з префіксами, а Mozilla без них, IE10 додає підтримку застарілого синтаксису "flexbox 2011".
• З 2014 року - все нові браузери підтримують останню специфікацію (навіть Internet Explorer 11). Якщо ж якесь керівництво або блог-пост про Flexbox містять такі конструкції, як display: flex; і flex- (*), то вони відображають актуальну інформацію, яка міститься в поточній версії специфікації.

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

Як це не дивно, але застарілий синтаксис, зразка 2009 року досить непогано підтримується більшістю браузерів, підтримка реалізована в: Chrome, Firefox 2+, Safari 3.1+ і ін. Вона є практично скрізь, за винятком IE 9 і ранніх версіях IE і Opera. Але на жаль, реалізація даної технології в браузерах була неповною і частково неузгодженої, що і стало причиною перегляду специфікації.

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

Чтокасается IE 10, то це, мабуть, єдиний випадок підтримки проміжної, не досконалою версією Flexbox (в якій використовується значення display: flexbox;). (* Більш того, вона вимагає застосування Вендорний префікса -ms-).

основних зас синтаксису

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

Для початку використання потрібно вказати контейнеру display: flex або display: inline-flex .

Flex_container (display: flex;)

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

Одне з основних понять в fleхbox - це осі.

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

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

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

Демо основних властивостей flex-контейнера

доступні значення flex-direction:

• row (значення за замовчуванням): Зліва направо (в rtl справа наліво)
• row-reverse : Справа наліво (в rtl зліва направо)
• column : зверху вниз
• column-reverse : знизу вгору

justify-content - вирівнювання по головній осі.

Css властивість justify-content головною осі.

доступні значення justify-content:

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

align-items - вирівнювання по поперечної осі.

Css властивість align-items визначає те, як будуть вирівняні елементи уздовж поперечної осі.

доступні значення align-items:

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

СSS властивості flex-direction , Justify-content, align-items повинні застосовуватися безпосередньо до flex-контейнеру, а не до його дочірнім елементам.

Багаторядкова організація блоків всередині flex-контейнера.

flex-wrap

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

доступні значення flex-wrap:

• nowrap (значення за замовчуванням): Блоки розташовані в одну лінію зліва направо (в rtl справа наліво)
• wrap : Блоки розташовані в декілька горизонтальних рядів (якщо не поміщаються в один ряд). Вони слідують один за одним зліва направо (в rtl справа наліво)
• wrap-reverse : То-же що і wrap, Але блоки розташовуються в зворотному порядку.

flex-flow - зручне скорочення для flex-direction + flex-wrap

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

Flex_container (flex-direcrion: column; flex-wrap: wrap;) / * або * / .flex_container (flex-flow: column wrap;)

align-content

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

важливо: align-content працює тільки в багаторядковому режимі (тобто в разі flex-wrap: wrap; або flex-wrap: wrap-reverse;).

Доступні значення align-content:

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

Демо багаторядкова в Flexbox

CSS правила для дочірніх елементів flex-контейнера (flex-блоків)

flex-basis - базовий розмір окремо взятого flex-блоку

Задає початковий розмір по головній осі для flex-блоку до того, як до нього будуть застосовані перетворення, засновані на інших flex-факторах. Може бути заданий в будь-яких одиницях вимірювання довжини (px, em,%, ...) або auto (за замовчуванням). Якщо заданий як auto - за основу беруться розміри блоку (width, height), які, в свою чергу, можуть залежати від розміру контенту, якщо не вказані явно.

flex-grow - "жадібність" окремо взятого flex-блоку

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

приклад 1:

• flex-grow: 1 , То вони будуть однакового розміру
• Якщо один з них має flex-grow: 2 , То він буде в 2 рази більше, ніж всі інші

приклад 2:

• Якщо все flex-блоки всередині flex-контейнера мають flex-grow: 3 , то вони будуть однакового розміру
• Якщо один з них має flex-grow: 12 , То він буде в 4 рази більше, ніж всі інші

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

flex-shrink - фактор "сжимаемости" окремо взятого flex-блоку

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

flex - короткий запис для властивостей flex-grow, flex-shrink і flex-basis

Flex_block (flex-grow: 12; flex-shrink: 3; flex basis: 30em;) / * або * / .flex_block (flex: 12 3 30em;)

Демо flex-grow, flex-shrink і flex-basis

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

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

Доступні значення align-self (ті ж 5 варіантів, що і для align-items)

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

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

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

Значення order не ставить абсолютну позицію елемента в послідовності. Воно визначає вагу позиції елемента.

В даному випадку, блоки будуть слідувати один за іншим уздовж головної осі в наступному порядку: Flex блок 5, Flex блок 1, Flex блок 3, Flex блок 4, Flex блок 2

Демо align-self і order

Bootstrap нарешті почав підтримувати flexbox. У Bootstrap 4 Flexbox буде задіяний для наступних компонентів:

• вся система сіток (міксини і зумовлені класи), які перейдуть з float на display: flex;
• формиввода display: table; змінить display: flex;
• медіа компоненти перейдуть display: table;

Використовуйте Flexbox - це круто!

зміст:

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

UPD від 02.02.2017: зробила зручну шпаргалку по флексбоксам, з живими демки і описами з спеки: Flexbox cheatsheet.

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

Згідно сайту caniuse.com, Flexbox Не підтримується 8 і 9-м IE і Opera Mini, а в інших браузерах підтримуються не всі властивості і / або потрібні префікси.

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

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

Так само слід мати на увазі, що при використанні Flexbox для внутрішніх блоків не працюють float, clear і vertical-align, а так само властивості, які визначають колонки в тексті.

Приготуємо полігон для експериментів:

Один батьківський блок (жовтий) і 5 дочірніх.

Display: flex

І тепер батьківського елементу додаємо display: flex; . Внутрішні div-и шикуються в ряд (уздовж головної осі) колонками однакової висоти, незалежно від вмісту.

display: flex; робить все дочірні елементи гумовими - flex, а не інлайновимі або блоковими, як було спочатку.

Якщо батьківський блок містить картинки або текст без обгорток, вони стають анонімними flex-елементами.

Властивість display для Flexbox може приймати два значення:

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

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

Flex-direction

Напрямок розкладки блоків управляється властивістю flex-direction.

Можливі значення:

row - рядок (значення за замовчуванням); row-reverse - рядок з елементами в зворотному порядку; column - колонка; column-reverse - колонка з елементами в зворотному порядку.

row і row-reverse

column і column-reverse

Flex-wrap

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

Можливі значення:

nowrap - блоки не переносяться (значення за замовчуванням); wrap - блоки переносяться; wrap-reverse - блоки переносяться і розташовуються в зворотному порядку.

Для короткої записи властивостей flex-direction і flex-wrap існує властивість: flex-flow.

Можливі значення: можна задавати обидва властивості або тільки якесь одне. наприклад:

flex-flow: column; flex-flow: wrap-reverse; flex-flow: column-reverse wrap;

Демо для row-reverse wrap-reverse:

Order

Для управління порядком блоків служить властивість order.

Можливі значення: числа. Щоб поставити блок найпершим, задайте йому order: -1:

Justify-content

Для вирівнювання елементів є кілька властивостей: justify-content, align-items і align-self.

justify-content і align-items застосовуються до батьківського контейнера, align-self - до дочірнім.

justify-content відповідає за вирівнювання по головній осі.

Можливі значення justify-content:

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

flex-start і flex-end

space-between, space-around

Align-items

align-items відповідає за вирівнювання по перпендикулярній осі.

Можливі значення align-items:

flex-start - елементи вирівнюються від початку перпендикулярній осі; flex-end - елементи вирівнюються від кінця перпендикулярній осі; center - елементи вирівнюються по центру; baseline - елементи вирівнюються по базовій лінії; stretch - елементи розтягуються, займаючи весь простір по перпендикулярній осі (значення за замовчуванням).

flex-start, flex-end

baseline, stretch

Align-self

align-self також відповідає за вирівнювання по перпендикулярній осі, але задається окремим flex-елементам.

Можливі значення align-self:

auto - значення за замовчуванням. Чи означає, що елемент використовує align-items батьківського елемента; flex-start - елемент вирівнюється від початку перпендикулярній осі; flex-end - елемент вирівнюється від кінця перпендикулярній осі; center - елемент вирівнюється по центру; baseline - елемент вирівнюється по базовій лінії; stretch - елемент розтягується, займаючи весь простір по висоті.

Align-content

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

Можливі значення:

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

flex-start, flex-end

center, stretch

space-between, space-around

Ps: Деякі штуки мені так і не вдалося побачити в дії, наприклад, рядок flex-flow: column wrap або повний запис того ж flex-direction: column; flex-wrap: wrap; .

Елементи стоять стовпчиком, але не переносяться:

Чи не спрацьовує wrap при flex-direction: column; , Хоча в спікся це виглядає ось так:

Думаю, з часом запрацює.

UPD від 21.06.2014: все працює, якщо задати блоку висоту. За підказку спасибі

Сучасний front-end розробник активно повинен вміти застосовувати на практиці різні інструменти, що дозволяють автоматизувати процес верстки макетів і програмування клієнтської складової проекту. Для цього вже існує безліч фреймворків, як великих, так і малих, системи збирання, пакетні менеджери, ціла купа пакетів для задач будь-якого рівня, препроцесори, шаблонизатор та інший "цукор", який створений спростити і підвищити продуктивність роботи фахівця в даній області.

На жаль, початківцям фронтах буває складно розібратися в достатку цих інструментів, так як тут потрібно постійно розвиватися і знати основи верстки. І багато з цієї причини продовжують верстати «по-дідівськи», звичайний css, з купою повторюваних селектор, верстка без розуміння принципу різних сіток, дикі головні болі з різного роду центрированием і т.д.

Якщо раніше, мільйон років тому, верстали на таблицях, а потім перелізли на діви, то зараз вже без застосування flexbox в поєднанні з сітками або ж готовим css-фреймворком, відчуваю, що навіть проста верстка на дівах скоро буде вважатися «моветоном». Поки це ще не так, але наскільки я спостерігаю (точніше, навіть не встигаю спостерігати) за розвитком в даній області різних методик і best practices, то швидше за все, такий варіант має місце бути.

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

верстаємо адаптивно

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

Як відомо, будь-який блоковий елемент display: block за замовчуванням займає всю доступну ширину екрана, тільки якщо ми не визначимо його ширину явно (або в px, або в%). Але навіть якщо йому буде задана певна таким чином ширина, то наступний після нього блоковий елемент буде йти після нього з нового рядка (цим, до речі і відрізняється block від inline, який буде слідувати один за одним). Це важливий момент, його потрібно просто зрозуміти, а для того щоб зрозуміти, це справа легко переглянути в інспектора будь-якого браузера.

Якщо ж нам треба, щоб блокові елементи були сусідами один з одним, то необхідно обтеаканіе елементів (float), причому потрібно задавати ширину блоків в%, щоб браузер автоматично обчислював ширину в пікселях. Як поширений приклад, це блок контенту, а поруч сайдбар. Після обтікання елементів, незабутній використовувати clearfix, скидання обтікання, щоб не зламати верстку надалі.

Найпершим справою ми повинні "повідомити" браузер, що хочемо використовувати адаптивне подання, відповідно до якого будь-який браузер буде відкривати сторінку в цьому режимі, робиться це ось таким оголошенням між тегами head документа:

Meta name \u003d "viewport" content \u003d "width \u003d device-width, initial-scale \u003d 1"

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

У будь-grid системі є брейкпоінт, точки переходу. Подивимося на Bootstrap, коли при зміні ширини екрану (мобільний, планшетний вид, і т.д.), відбувається перевірка елемента, що має поточний стовпчик клас (наприклад клас десктопа для колонки, в популярному фреймворку Bootstrap, це col-md- (x ), md - десктоп). Класи в свою чергу задають різну ширину в%, що дорівнює (100/12) · x, де x - коефіцієнт ширини, від 1 до 12.

Колоночного класи описують поведінку обтікання елементів: є клас (в той же час клас може бути для різних пристроїв) - обтікання задано, немає - ширина 100% (типово для подання контенту на мобільних пристроях). А реалізовано цю поведінку за допомогою медіа-запитів, які розуміють всі браузери. Медіа-запит - в css це поняття означає правило, при виконанні умови якого, підключаються відповідні стилі, наприклад, ширина стала менше 600px - підключаємо новий блок стилів, переобумовленої старий. Наприклад, стовпчик клас col-md- (x) підключається за замовчуванням від 992px і вище, і відключається до 992px. Але все брейкпоінт бутстраповскіе за замовчуванням можна перевизначити своїми при компіляції сітки.

Ось і вся проста механіка з дивами, яким потрібно задати ширину в%, float: left; і очистити обтікання після колонок (в бутстрап колонки обертаються у врапперов c класом row в цьому випадку), які ми вибудовуємо в ряд. Все це з легкістю можна реалізувати самому і без всякої сітки, коли є поняття, як це працює, просто в будь-який сітці прописані класи і багато коду вже написано, вашим завданням залишається прописувати класи елементів, ось і все.

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

Тут хочеться відзначити, що ширина, задана в%, як у випадку з зоною контенту і сайдбарі (шапка і підвал за замовчуванням займають всю ширину, 100%), при резайзінге (або відкритті сторінки на малому екрані) відразу ж автоматично перераховується. Це, мабуть головне правило, задавати все в%, все інше браузер зробить сам.

У дівах у нас нехай буде просто текст поки що, потренуємося вирівнювати текст (по горизонталі / вертикалі). Ще хороша практика футер виключати із загального врапперов, задавати html і body, height: 100%, врапперов: min-height: 100%, щоб футер завжди був притиснутий до низу сторінки.

Я звик використовувати scss, наведу лістинг коду на ньому:

$ Grey: # 808080; $ H: 50px; html, body (margin: 0; height: 100%;) body (font-family: monospace, sans-serif; text-transform: uppercase;) .row (display: flex;) .vertical-center (align-items: center; justify-content: center;) .wrap (min-height: 100%; header, .content, .sidebar (border: 1px solid $ grey;) header (height: $ h;) .content (height: 100px; padding: 15px 15px 0 15px; border-top-width: 0; margin-right: 1%; width: 75%;) .sidebar (height: 120px; padding: 15px 15px 0 15px; border-top-width: 0; width: 25%;)) footer (height: $ h; border: 1px solid $ grey;)

display: flex; - вкл. flex-контекст; властивість flex-direction: row; - за замовчуванням, якщо не вкажемо column явно. Це те що нам дозволяє робити багато приголомшливі речі. Нe зовсім впевнений, але начебто поки що це властивість не скрізь підтримується caniuse, але пора б вже викинути всі ці старі браузери і встановити сучасні, чи не так? :)

Ще задаємо співвідношення для ширини контент - сайдбар, 75%: 25%. Той же самий ефект вийшов би, якби використовували бутстрап. Тільки з класами col-md-9 для контенту ((100/12 · 9)% - ширина у відсотках, 75) і col-md-3 для сайдбара ((100/12 · 3)% - ширина у відсотках, 25)

Отже, давайте розберемося, що відбувається і як працює флексбокс. Найперше, це потрібно задати display: flex тому контейнеру, в якому нам потрібно робити центрування, наприклад. У розмітці у мене це шапка, підвал і контейнер, всередині якого контент і сайдбар. Саме найпростіше, що еффетівно робить флексбокс тут, так це просто бере і вирівнює текст, який в шапці і підвалі, за допомогою класса.vertical-center:

.vertical-center (align-items: center; // вирівнюємо по центру, по вертикалі justify-content: center; // вирівнюємо по центру, по горизонталі)

В результаті, текст вирівнюються в двох напрямках, в шапці і підвалі. Залишилася середня частина, тут, якби ми не задали display: flex, то за замовчуванням залишився б display: block, що в підсумку з блоками контенту і сайдбара, вийшло ось так:

Тобто розташування один під одним. І не має значення, що їм задана ширина, довелося б робити обтікання. Але навіть не в цьому зручність флексбокса. Чи не в тому щоб скоротити код на одну інструкцію, а в тому, що за допомогою ще кількох чудових властивостей, які ми можемо встановити флексбоксу, можна центрувати блоки різної ширини в двох напрямках, також як і текст (по центру, по вертикалі / горизонталі, на початку, в кінці)!

Але перед тим, як перейти до цього головного питання, для якого і створювалася ця замітка, давайте трохи покращимо наш простий макет в плані адаптивності. Зараз при ресайз, контент і сайдбар не складаються один під одного. Необхідно виправити це, так як, уявіть собі, що весь текст при малих дозволах буде некрасиво «спресований» в області контенту і сайдбара. Я не кажу вже про картинки. До речі, зображень, які будуть адаптивними обов'язково треба ставити:

img (display: block; max-width: 100%; height: auto;)

Скористаємося медіа-запитами. Поліпшуємо наш css, я його переписувати весь не буду, просто залишу // ... * там де код той же залишився:

// .. $ mobileBreak: 479px; html, body (// ...) body (// ...) .row (// ...) .middle (@media (max-width: $ mobileBreak) (display: block;)) .vertical- center (// ...) .wrap (// ... header, .content, .sidebar (// ...) header (// ...) .content (// ... @media (max -width: $ mobileBreak) (width: auto; margin-right: 0;)) .sidebar (// ... @media (max-width: $ mobileBreak) (width: auto;))) footer (//. ..)

Тепер сайдбар складеться під контент на телефонах (<480px):

Робота з вирівнюванням

Як тест, створимо в блоці контенту, кілька кульок з заливкою різними кольорами, так щоб вони були вирівняні по горизонталі і по вертикалі в області контенту, для цього додаємо html:

// ... $ mobileBreak: 479px; @mixin wh ($ w, $ h) (width: $ w; height: $ h;) // ... .content (// ... padding-top: 0; .content-inner (height: 100% ; justify-content: space-between; align-items: center; .bounce (-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;) .red (background : # D9534F;) .green (background: # 6AB181;) .blue (background: # 2D8CD3;) .wh50 (@include wh (50px, 50px);) .wh60 (@include wh (60px, 60px);). wh35 (@include wh (35px, 35px);)) @media (max-width: $ mobileBreak) (// ...)) // ...

Знову таки, там де знаки, // ..., код залишається той же самий.

результат:

Як бачимо, кульки вирівняні ідеально. При додаванні нових кульок, вирівнювання буде відбувається також без всяких проблем. Властивість align-items: center; відповідає за вирівнювання по вертикалі, а justify-content: space-between; рівномірно вирівнює по горизонталі.

align-items: flex-start; робить ось так:

За аналогією, після застосування align-items: flex-end; кульки виявляються внизу контейнера, а align-items: baseline; робить ось так:

Є ще властивість align-items: stretch ;, воно ніби як витягує кожен елемент в висоту, але у мене по швидкому не вийшло реалізувати, тому скрін НЕ покажу.

Це все відноситься до розташування по горизонтальній осі (за замовчуванням). Але якщо ми зробимо явно column:

.content-inner (flex-direction: column;)

Те кульки стануть по вертикалі! І знову таки, застосовуючи різні властивості align-items, ми будемо домагатися всього того, що і при горизонтальному побудові кульок, але тільки вже по вертикалі! Ще є властивість align-self, воно перекриває властивість align-items для одного якого-небудь кульки, або групи. Ось таким ось способом можна гнучко управляти всіма вирівнювання.

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

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

Якщо говорити коротко, то верстка з 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 конструкцією. Одні потрібно застосовувати до основного контейнера, а інші до елементів цього контейнера.

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

display:

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

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

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

flex-direction:

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

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

flex-wrap:

Управляє перенесенням непомещающіхся в контейнер елементів.

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

flex-flow: direction 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 \u003d row, то по горизонталі, а якщо direction \u003d column, то по вертикалі.

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

align-content:

Вирівнює ряди, в яких знаходяться елементи по поперечної осі. Те ж що 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-items:

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

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

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

flex-grow:

Задає коефіцієнт збільшення елемента при наявності вільного місця в контейнері. За замовчуванням 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, то він буде в 4 рази більше, ніж всі інші

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

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

flex-shrink:

Задає коефіцієнт зменшення елемента. Властивість протилежне 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

flex-basis:

Встановлює базову ширину елемента - ширину до того як будуть вирахувані інші умови впливають на ширину елемента. Значення можна вказати в 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 shrink basis)

Коротка запис трьох властивостей: 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:

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

За замовчуванням: 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% \u003d\u003d 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 Флекс у флекс (просто приклад)

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

Для вирішення цього завдання, самі блоки розтягуються флексом і їм встановлена \u200b\u200bмаксимально можлива ширина. Кожен внутрішній блок також є флекс конструкцією, з поверненою віссю 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; -ms -flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-line-pack: 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; -ms-flex 1 2 100px; flex 1 2 100px; -ms-flex-item-align : center; align-self: center; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;)

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

Chrome	Safari	Firefox	Opera	IE	Android	iOS
20 (old)	3.1+ (old)	2-21 (old)		10 (tweener)	2.1 + (old)	3.2+ (old)
21+ (new)	6.1+ (new)	22+ (new)	12.1+ (new)	11+ (new)	4.4+ (new)	7.1+ (new)

• (New) - новий синтаксис: display: flex; .
• (Tweener) - старий неофіційний синтаксис 2011 року: display: flexbox; .
• (Old) - старий синтаксис 2009 року: display: box;

Відео

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

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

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

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