Я хотів би розповісти про 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
flex-shrink
Застосовується до дочірньому елементу / flex-елемента.
Визначає для flex-елемента можливість стискатися при необхідності.
flex-shrink
Негативні числа не приймаються.
flex-basis
Застосовується до дочірньому елементу / flex-елемента. Визначає розмір за замовчуванням для елемента перед розподілом простору в контейнері.
flex-basis
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 має ряд переваги:
- Сама назва "flex" дає зрозуміти, що все блоки дуже легко можна зробити гнучкими. Необхідні елементи можна стиснути і розтягнути за спеціальними правилами, зайнявши таким чином все потрібне простір.
- Базова лінія тексту легко вирівнюється по вертикалі і горизонталі.
- Порядок розташування елементів в шаблоні не грає вирішальну роль. При необхідності його можна поміняти в стилях, що є особливо важливим для деяких аспектів адаптивної верстки.
- Для заповнення всього наданого місця елементи можуть автоматично вишикуватися в кілька рядків або стовпців.
- Більшість мов світу мають форму написання справа-наліво rtl (right-to-left), на відміну від звичного нам ltr (left-to-right). Особливість f lexbox полягає в тому, що він адаптований для цього, так як для нього є поняття початку і кінця, а не права і ліва. У браузерах з налаштуванням rtl всі елементи автоматично розташовуються в реверсному порядку.
- Синтаксис правил 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 - напрямок елементів знизу вгору ()
Управляє перенесенням непомещающіхся в контейнер елементів.
- nowrap (default) - вкладені елементи розташовуються в один ряд (при direction \u003d row) або в одну колонку (при direction \u003d column) незалежно від того поміщаються вони в контейнер чи ні.
- wrap - включає перенесення елементів на наступний ряд, якщо вони не поміщаються в контейнер. Так включається рух елементів по поперечної осі.
- wrap-reverse - теж що 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
Вирівнює ряди, в яких знаходяться елементи по поперечної осі. Те ж що 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-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: 0
За замовчуванням елементи мають order: 0 і ставляться в порядку їх появи в HTML коді і напрямки ряду. Але якщо змінити значення властивості order, то елементи будуть вибудовуватися в порядку значень: -1 0 1 2 3 .... Наприклад якщо одному з елементів вказати order: 1, то спочатку будуть йти всі нульові, а потім елемент з 1.
Так можна, наприклад, перший елемент перекинути в кінець, при цьому не змінюючи напрямок руху інших елементів або HTML код.
нотатки
Чим відрізняється flex-basis від width?
Нижче важливі відмінності між flex-basis і 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 працює тільки для головної осі. Це означає що при flex-direction: row flex-basis контролює ширину (width), а при flex-direction: column контролює висоту (height). .
flex-basis застосовується тільки до flex елементам. А значить якщо відключити flex у контейнера це властивість не матиме ефекту.
Абсолютні елементи контейнера не беруть участь у flex конструкції ... А значить, flex-basis не впливає на елементи flex контейнера, якщо вони абсолютні position: absolute. Їм потрібно буде вказати width / height.
По можливості все ж віддавайте перевагу 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 коду.