Що таке Flexbox? Опис всіх css властивостей, основні принципи, переваги та недоліки.

1. Основні переваги flexbox
2. Трішки історії
3. починаємо занурення
4. HTML
5. CSS
6. Основні властивості flex-контейнера. Головна і поперечна вісь.
7. flex-direction - напрямок головної осі
8. justify-content - вирівнювання по головній осі.
9. align-items - вирівнювання по поперечної осі.
10. Демо основних властивостей flex-контейнера
11. Багаторядкова організація блоків всередині flex-контейнера.
12. flex-flow - зручне скорочення для flex-direction + flex-wrap
13. CSS
14. align-content
15. Демо властивостей багаторядкового в flex
16. CSS правила для дочірніх елементів flex-контейнера (flex-блоків)
17. flex-grow - "жадібність" окремо взятого flex-блоку
18. flex-shrink - фактор "сжимаемости" окремо взятого flex-блоку
19. flex - короткий запис для властивостей flex-grow, flex-shrink і flex-basis
20. CSS
21. Демо для flex-grow, flex-shrink і flex-basis
22. align-self - вирівнювання окремо взятого flex-блоку по поперечної осі.
23. order - порядок проходження окремо взятого flex-блоку всередині flex-контейнера.
24. HTML
25. Демо для align-self і order
26. margin: auto по вертикалі. Мрії збуваються!
27. Речі, які слід пам'ятати
28. На закінчення

Flexbox по праву можна назвати вдалою спробою рішення величезного спектру проблем при побудові лейаутов в css. Але перш ніж перейти до його опису, давайте з'ясуємо, що ж не так з способами верстки, якими ми користуємося зараз?

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

Сталося так тому, що html і css розвивалися еволюційно. На початку веб-сторінки були схожі на однопоточні текстові документи, трохи пізніше розбиття сторінки на блоки робили таблицями, потім стало модним верстати float-ами, а після офіційної смерті ie6 додалися ще й прийоми з inline-block. У підсумку ми отримали в спадок гримучу суміш всіх цих прийомів, що використовується для побудови лейаутов 99,9% всіх існуючих веб-сторінок.

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

Основні переваги flexbox

1. Всі блоки дуже легко робляться "гумовим", що вже випливає з назви "flex". Елементи можуть стискатися і розтягуватися за заданими правилами, займаючи потрібний простір.
2. Вирівнювання по вертикалі і горизонталі, базової лінії тексту працює шикарно.
3. Розташування елементів в html не має вирішального значення. Його можна поміняти в CSS. Це особливо важливо для деяких аспектів responsive верстки.
4. Елементи можуть автоматично вибудовуватися в кілька рядків / стовпців, займаючи весь наданий місце.
5. Безліч мов в світі використовують написання справа наліво rtl (right-to-left), на відміну від звичного нам ltr (left-to-right). Flexbox адаптований для цього. У ньому є поняття початку і кінця, а не права і ліва. Тобто в браузерах з локаллю rtl всі елементи будуть автоматично розташовані в реверсному порядку.
6. Синтаксис CSS правил дуже простий і освоюється досить швидко.

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

підтримка браузерами поки неповна (2014 року). Винен в цьому в основному Internet explorer, який підтримує специфікацію 2011 тільки починаючи з 10 версії,. Не дивлячись на це, я б порекомендував звернути увагу на просторість підтримки усіма іншими мобільними і десктопними браузерами! Тут все прекрасно. Якщо Вам потрібна мобільна версія сайту або web-based додаток, то його вже можна (а, можливо, і потрібно) робити, використовуючи всі переваги 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".
• 2011 - Tab Atkins береться за розвиток Flexbox і публікує 2 чернетки. У цих чернетках синтаксис змінений значно. Chrome, Opera і IE 10 впроваджують підтримку цього синтаксису. Він відомий під назвою "flexbox 2011"
• 2012 - Синтаксис знову трохи змінений і уточнено. Специфікація переходить в статус Candidate Recommendation і відома під назвою "flexbox 2012". Opera впроваджує беспрефіксную підтримку, Chrome підтримує поточну специфікацію з префіксами, а Mozilla без них, IE10 додає підтримку застарілого "flexbox 2011" синтаксису.
• 2014 року - все нові браузери підтримують останню специфікацію (включаючи IE 11)

Ми будемо розглядати всі приклади на основі нової специфікації. Якщо вам потрібна підтримка старих Сhrome, FF і IE10, краще використовувати autoprefixer від Андрія Ситника , Який автоматично додасть css правила і Вендорний префікси для застарілих специфікацій.

починаємо занурення

Flexbox визначає набір CSS властивостей для контейнера (flex-контейнер) і його дочірніх елементів (flex-блоків). Перше, що потрібно зробити - це вказати контейнеру display: flex або display: inline-flex.

HTML

<Div class = "my-flex-container"> <div class = "my-flex-block"> item1 </ div> <div class = "my-flex-block"> item2 </ div> <div class = "my-flex-block"> item3 </ div> </ div>

CSS

.my-flex-container {display: flex; }

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

Одним з основних понять в fleхbox є осі.

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

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

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

Доступні значення 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. Розслабтеся, покликавши по демке і використовуйте її, якщо потрібно буде освіжити в пам'яті.

flexbox demo

Багаторядкова організація блоків всередині 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-flow: < 'flex-direction'> || < 'Flex-wrap'>

CSS

/ * Тобто ... * / .my-flex-block {flex-direcrion: column; flex-wrap: wrap; } / * Це те ж саме, що ... * / .my-flex-block {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 (значення за замовчуванням): Ряди блоків розтягнуті, щоб зайняти всі наявний простір.

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

Демо властивостей багаторядкового в flex

flexbox demo

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

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

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

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

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

Приклад 1:

• Якщо все flex-блоки всередині flex-контейнера мають 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: none | [< 'Flex-grow'> < 'flex-shrink'>? || < 'Flex-basis'>]

CSS

/ * Тобто ... * / .my-flex-block {flex-grow: 12; flex-shrink: 3; flex basis: 30em; } / * Це те ж саме, що ... * / .my-flex-block {flex: 12, 3 30em; }

Демо для flex-grow, flex-shrink і flex-basis

flexbox demo

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

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

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

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

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

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

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

HTML

<Div class = "my-flex-container"> <div class = "my-flex-block" style = "order: 5"> item1 </ div> <div class = "my-flex-block" style = " order: 10 "> item2 </ div> <div class =" my-flex-block "style =" order: 5 "> item3 </ div> <div class =" my-flex-block "style =" order: 5 "> item4 </ div> <div class =" my-flex-block "style =" order: 0 "> item5 </ div> </ div>

В даному випадку, блоки будуть слідувати один за іншим уздовж головної осі в наступному порядку: item5, item1, item3, item4, item2

Демо для align-self і order

flexbox demo

margin: auto по вертикалі. Мрії збуваються!

Flexbox можна любити хоча б за те, що звичне всім вирівнювання по горизонталі через margin: auto тут працює і для вертикалі!

.my-flex-container {display: flex; height: 300px; / * Або що завгодно * /} .my-flex-block {width: 100px; / * Або що завгодно * / height: 100px; / * Або що завгодно * / margin: auto; / * Магія! Блок відцентровано по вертикалі і горизонталі! * /}

Речі, які слід пам'ятати

1. Не слід використовувати flexbox там, де в цьому немає необхідності.
2. Визначення регіонів і зміна порядку контенту в багатьох випадках все-таки корисно робити залежним від структури сторінки. Продумуйте це.
3. Розберіться в flexbox і знайте його основи. Так набагато легше досягти очікуваного результату.
4. Не забувайте про margin-и. Вони враховуються при установці вирівнювання по осях. Також важливо пам'ятати, що margin-и в flexbox не «колапс", як це відбувається в звичайному потоці.
5. Значення float у flex-блоків не враховується і не має значення. Це, напевно, якось можна використовувати для graceful degradation при переході на flexbox.
6. flexbox дуже добре підходить для верстки веб-компонентів і окремих частин веб-сторінок, але показав себе не з кращого боку при верстці базових макетів (розташування article, header, footer, navbar і т.п.). Це все ще спірний момент, але ця стаття досить переконливо показує недоліки xanthir.com/blog/b4580

На закінчення

Я думаю, що flexbox, звичайно ж, не витіснить всі інші способи верстки, але, безумовно, найближчим часом займе гідну нішу при вирішенні величезної кількості завдань. І вже точно, пробувати працювати з ним потрібно вже зараз. Одна з таких статей буде присвячена конкретних прикладів роботи з flex-версткою. Підписуйтесь на новини;)