Наша совместная команда Banwar.org

Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

Що таке 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

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 - напрямок головної осі

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

space-around: все блоки рівномірно розподілені уздовж головної осі, розділяючи весь вільний простір порівну

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

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

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

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

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

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-версткою. Підписуйтесь на новини;)

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

Новости

Banwar.org
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.