Flexbox приклади: шаблони для сайту від початку і до кінця

2

Від автора: дні милиць на властивості float і margin канули в небуття, і в CSS з’явилися нові чудові властивості, чудово підходять на цю роль. Такі трюки, як вертикальне вирівнювання всередині блоку, рівномірний розподіл місця, контроль за сортуванням елементів і прилипає футер, майже неможливі без flexbox.

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

Гнучкі атомарні компоненти

Основна ідея інтерфейсу сайту Tracks полягає в ізольованості кожної частини дизайну. Ця ідея була викладена Brad Frost.

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

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 1. Картки відображаються за принципом атомарного веб-дизайну. Можете вгадати, які з них зроблені на flexbox?

Якщо хочете заглибитися в теорію атомарного дизайну, прочитайте статтю brad’s post. Також варто прочитати його книгу.

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 2. Початковий інтерфейс Tracks, який увібрав у себе всі переваги як flexbox, так і атомарного дизайну.

Інтерфейс представляє з себе набір компонентів InVision. Під час першої перевірки інтерфейсу я почав шукати підходящі місця для flexbox. Я вирішив застосовувати flexbox на сторінках з відомими шаблонами типу «сайдбар зліва, основний контент справа», які найчастіше виконані на застарілому властивості float.

Одним з позитивних моментів в редизайні Tracks був той, що сайт повинен був добре працювати в Internet Explorer (IE) 10+, Android 4.1 і iOS 7+. Це була просто чудова новина, так як всі вони відмінно підтримують flexbox з відповідними префіксами. Навіть незважаючи на стабільну підтримку в наші дні, скажемо, для Android 4.1 потрібно на всяк випадок зробити фолбэк. А як буде виглядати той же фолбэк, якщо властивість взагалі не підтримується браузером? З допомогою Modernizr і класу .no-flexbox розробники можуть визначити ці браузери і знайти стабільні шаблони (в іншому випадку можна скористатися CSS запитами @supports). Наприклад:

html.flexbox ul.flexbox-target,
html.no-js ul.flexbox-target {
display: flex;
flex-direction: row;
}
html.no-flexbox ul.flexbox-target li,
html.no-js ul.flexbox-target li {
display: inline-block; /* Could also use a float-positioned-layout system instead */
}

Там, де не зовсім ясно, чи підтримується flexbox, ми будемо використовувати на всяк випадок display: inline-block. Також, щоб елемент не використовувався в JS, додамо до нього клас no-js. Спадкування в CSS не порушиться у разі, якщо flexbox не підтримується або не завантажився JS. Flexbox прекрасно співіснує з такими властивостями, як float і display: table, відносним позиціонуванням. Браузер завжди буде позиціонувати flexbox вище за інших властивостей, якщо він підтримується. А якщо не підтримується, будуть застосовані звичайні властивості.

Як і скрізь, наш вибір залежить від аудиторії браузерів, аналітики і бюджету. У мене є золоте правило – завжди робити вибір в користь самого важливого умови.

Инлайновые шаблони

Компоненти меню виявилися вкрай корисні в flexbox, не тільки із-за легкості створення, але і з-за прискорення процесу розробки. Завдяки flexbox инлайновые шаблони, які раніше забирали у розробників масу часу, тепер займають усього лише хвилини. Якщо ви мали честь застосовувати даний шаблон у версіях IE до 9, ви знаєте про це почуття розчарування.

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 3. Панель адміністратора використовує инлайновый шаблон, кнопки меню вертикально центровані.

Розмітка цієї панелі виглядає так: елемент nav, всередині якого розташована серія посилань. Приклад HTML:

Back to pipeline
Account
Users
Export

І відповідні стилі:

nav[role=»navigation»] {
display: flex;
align-items: center; /* вертикальне центрування */
}
nav[role=»navigation»] a {
display: inline-block; /* щоб уникнути проблем з лінійним відображенням в IE 10 */
}
nav[role=»navigation»] a[href=»pipeline.html»] {
flex: 1;
}

Це самий мінімум, як розмітки, так і стилів. Зверніть увагу на значення inline-block, задане посилання. Це значення вирішує проблему з сортуванням елементів за допомогою властивості order в IE10. Також були виявлені проблеми з дочірніми елементами контейнера flexbox, якщо поставити їм будь padding або margin. Краще всього постійно перевіряти роботу властивостей у всіх браузерах і платформах.

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 4. У мережі часто можна зустріти такий шаблон. Шаблон меню хедера з центрированным логотипом з допомогою flexbox.

Инлайновый шаблон вище зазвичай реалізується за допомогою несемантической розмітки. З появою flexbox підхід трохи змінився. Шаблон складається з посилань меню по лівому краю, центрованого логотипу і додаткових елементів по правому краю. Розмітка виглядає так:




Flexbox знижує потребу у створенні HTML милиць і створює семантику. Семантика в коді вкрай важлива. Семантичний код з більшим ступенем імовірності можна буде використовувати повторно.

Для вибудовування елементів в ряд до появи flexbox раніше розробники використовували display: inline-block і навіть float: left. Тепер flexbox найкращий варіант, розробникам більше не потрібно використовувати милиці, щоб створити красивий інтерфейс. Стилі для цього шаблону трохи довший, ніж для шаблону меню на малюнку 3. Але ці стилі легше писати, ніж ті, про яких ми говорили раніше.

.pipeline-header {
display: flex;
align-items: center;
justify-content: space between;
}
.pipeline-header > a {
display: inline-block; /* IE 10 не знає властивості order, з допомогою цієї властивості ми уникнемо зайвих проблем. */
}
.pipeline-logo {
flex: 1;
order: 2;
text-align: center;
}
.pipeline-nav {
flex: 1.25;
order: 1;
}
.pipeline-search {
flex: 1;
order: 3;
}
a[href=»#menu»] {
order: 4;
}

В шаблоні на малюнку 4 можна з легкістю змінювати послідовність елементів. Якщо потрібно змістити логотип, просто скористайтесь властивістю order. Пам’ятайте, що послідовність елементів в коді дуже важлива для пошуковиків; особливо у випадку з різними браузерами. Всі браузери і скрін рідери використовують код для визначення послідовності елементів, а не візуальний порядок в CSS. Це потрібно при використанні стрілок на клавіатурі.

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 5. Правильне розташування елементів макета (ліворуч) і змінене за допомогою flexbox візуальне розташування об’єктів (праворуч).

Нижче код для рисунку 5. Розмітка ніколи не змінює порядок відображення елементів.

А це стилі, з допомогою яких виходить права частина зображення 5.

.container {
display: flex;
flex-direction: columns; /* за замовчуванням row */
}
header {
order: 2;
}
main {
order: 3;
}
footer {
order: 1;
}

Цей шаблон використовується не тільки для меню, але і для футера.

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 6. Точно такий же шаблон, тільки тепер він застосований для футера.

Визначтеся, як контент повинен розташовуватися усередині контейнера і скільки місця він буде займати. Розташувати основний контент в центрі або зрушити його вниз? Як це вплине на інші елементи дизайну? Складайте такі питання для кожного проекту, перш ніж почати. Для кінцевих користувачів також вкрай важлива правильна навігація за допомогою кнопок на клавіатурі.

Инлайновые input’и

Форми можуть бути сущим пеклом, особливо якщо вони були заточені під шаблон сітки в форошопе. «Инлайновые лейбли» вкоренилися у веб-дизайні так само, як і легендарна гітара Fender Stratocaster в рок музиці.

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 7. Ще один прекрасний спосіб застосувати flexbox – инлайновые лейбли і инпуты. Але уважно стежте за довжиною тексту в лейблі, щоб він не зсував инпут на новий рядок.

Як я сказав у попередній главі, вам необхідно вирішити, де буде розташовуватися основний контент, він буде займати відведене для нього простір при зміні розміру вікна браузера або появі динамічного контенту.

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 8. Необхідно вирішити, як буде розташований контент. Зліва таблиця з вертикальним вирівнюванням посередині. Праворуч flexbox з вирівнюванням елементів по центру.

Цей скріншот явно вказує на недоліки flexbox при роботі з динамічним або дуже довгому контентом. Ефект на правому зображенні я називаю «центральний зрушення», контент рухається від центру до країв уздовж осей X і Y. Розмітка малюнка 8.


Щоб контролювати довгий текст в це випадку краще скористатися властивістю display: table. В такому випадку контент буде просто йти вниз, а не з центру до країв.

.form-group {
display: flex;
}
.form-group label {
display: table;
vertical-align: middle;
}
.form-group input {
flex: 1;
}

Спільне використання display table і flexbox це відмінна методика. Я рекомендую вам вивчити її. При використанні обох властивостей постійно дивитеся на появу багів.

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 9. Инлайновые инпут і кнопка. Однакова висота балансує дизайн.

Я побачив безліч схожих шаблонів поля пошуку. Даний шаблон настільки універсальний, що його можна застосувати на абсолютно будь-якому макеті. Звичайно, існують окремі CSS властивості, пов’язані з контекстом, але вони зберігаються окремо. HTML-розмітка типова: DIV оболонка з елементами, що створюють структуру flexbox:

Add

.form-group {
display: flex;
}
.form-group input {
flex: 1;
}

Випадаюче меню

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 10. За допомогою парочки flexbox способів область випадаючого меню злегка підсвічена.

Меню містить колонку зліва, містить лінійні елементи з вертикальним позиціонуванням по центру, і список елементів праворуч, де кожен елемент знаходиться на своєму рядку.

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 11. Для первинного меню при створенні меню використовувався виключно flexbox.

Розмітка меню:

Export
Get Help
Account
Preferences
Users
Payments
Logout

CSS стилів дуже мало і їх легко читати. Все як люблять розробники.

.menu {
display: flex;
}
.menu__options {
display: flex;
align-items: center;
}
.menu__items {
display: flex;
flex-direction: column;
}

Пара рядків коду і виходить ідеальна верстка. Крім усього іншого, дане меню автономно, а стилі і розмітка повністю семантичны. Ось і ще один приклад переваги flexbox перед хитромудрим позиціонуванням і милицями в розмітці.

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 12. Шаблон з медіа об’єктом. SVG фіксованої ширини розташований ліворуч, а праворуч примикає контент.

В цьому універсальному шаблоні, відомому як «медіа об’єкт», такі елементи, як зображення або відео розташовуються по одну сторону, а контент прилягає до них за іншу.

.medi-obj {
display: flex;
align-items: flex-start;
}
.media-obj__body {
flex: 1;
}

Я рекомендую прочитати всім статтю Solved by Flexbox Philip Walton на його сайті. Філіп дає корисні поради застосування конкретних шаблонів разом з flexbox, а також він постійно оновлює всі шаблони в своєму сховищі.

З цим шаблоном flexbox працює ідеально, проте стежте за тим, як прилеглий контент буде вести себе при зміні розміру вікна браузера. На відео видно, як зменшується відстань між зображенням і тексом, і текст, зрештою, накладається поверх зображення. Бути може це дурний приклад. Хто з розсудливих людей буде так сильно стискати вікно браузера? Але перед використанням flexbox дуже важливо зрозуміти, як контент взаємодіє з оточенням. Рішенням буде встановити для зображення max-width: 100%.

Flexbox приклади: шаблони для сайту від початку і до кінця

Календар.

Було б дуже нерозумно не згадати про календар. Ви можете задатися питанням «А чому не скористатися таблицею?». Календар побудований за методикою date-picker, і я вирішив розмежувати кнопки днів, місяців і року (кожен тижневий ряд знаходиться в окремому DIV). Такий підхід полегшить розмітку. Велике спасибі Shane Hudson за пояснення методики. Розмітка календаря насправді дуже проста.

Left Arrow
2015
Right Arrow

Jan
Feb

Код CSS дуже короткий, коротше просто бути не може. І тим не менш він зрозумілий.

.flex-container {
display: flex;
}
.datepicker__header {
justify-content: space between;
}
.datepicker__view {
align-items: center;
justify-content: flex-start;
}

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 14.Зліва використовується justify-content: space between. Праворуч justify-content: flex-start.

Ці два приклади наочно показують, чому краще все планувати заздалегідь. Як контент буде вести себе в блоці-обгортці? Як контент буде вести себе при зміні вікна браузера? А чи потрібно взагалі створювати контейнер? Всі ці питання дуже важливі на початковому етапі розробки.

Макет

Flexbox не тільки відмінно підходить для елементів інтерфейсу, але і для певних шаблонів. Типова картина це перший контейнер в один бік, а додатковий в іншу.

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 15. Сайдбар зліва і основний контент праворуч – ідеальний сценарій для flexbox. Це нагадало мені про техніку імітації колонок.

Код також дуже маленький, як і код для старих браузерів. Розмітка панелі адміністратора побудована на кількох DIV ах.


.admin-ui__body {
display: flex;
}
.admin-ui__body nav {
flex: 30%;
}
.admin-ui__main body {
flex: 70%;
}

Такий підхід відмінно підходить для випадку зі старими браузерами, як на малюнку 14. Шаблон вкрай простий. У будь-який момент можна додати display: table.

У цьому прикладі CSS 2 властивість display: table cell-це відмінний фолбэк під старі браузери. Елементи поводяться, як клітинки таблиці. А нам саме таку поведінку і потрібно, адже воно повністю імітує роботу flexbox. За допомогою display: table-header-group і display: table-footer-group навіть можна змінити порядок відображення елементів.

Sticky футер

Sticky футер одна з основних проблем для початківців розробників. Основне завдання приклеїти футер до низу сторінки. При додаванні контенту, футер просто зсувається трохи нижче, але все одно залишається в самому низу сторінки.

Flexbox приклади: шаблони для сайту від початку і до кінця

Малюнок 16. Стіки футер в правому сайдбарі.

Save Deal

Copy
Delete

.admin-edit {
display: flex;
flex-direction: column;
justify-content: space between;
}

Футер відмінно працює у всіх браузерах аж до IE6.

Демо. Flexbox прилипає футер з фолбэком display table. Працює аж до IE6!

Іншою частиною макета, де я ризикнув застосувати flexbox, виявився основний вид сайту, або як ми його назвали «пайплайн». Кожна картка має певну ширину. Такий підхід дозволяє скористатися усіма перевагами flexbox.

Flexbox приклади: шаблони для сайту від початку і до кінця

Пайплайн.

З допомогою flexbox мені вдалося красиво розташувати весь контент всередині карток. Весь сайт, як фільм «Початок» — Flexbox містить усередині себе flexbox і т. д. Все це вражає уяву, особливо якщо врахувати, що раніше розробники писали тонни коду для простого центрування елемента. А зараз це можна зробити всього пару рядків.

Будьте обережні

Під час тестів ми виявили, що властивість flex в тандемі з padding або margin повністю ламає макет в IE10.

.parent {
display: flex;
}
.parent .child {
flex: 1;
padding: 20px; /* Ламає макет в IE 10 */
}

У батьків варто властивість display: flex. А дочірні елементи з властивостями flex і padding ламають макет. Запит типу @supports (display: flex) {} повинен працювати на зразок Modernizr, тільки тут чистий CSS. Але на жаль, підтримка даного запиту не велика на сьогоднішній день. Замість нього можна використовувати:

Використовуйте клас no-flexbox бібліотеки Modernizr

Для центрування використовуйте трансформації або display table

Використовуйте table display

Порядок елементів можна налаштувати за допомогою table-caption, table-header-group і table-footer-group

Для фолбэка основної структури макета використовуйте властивість float

Для фолбэка инлайновых шаблонів використовуйте властивість display: inline або inline-block

Використовуйте умовні коментарі для IE9 і нижче

У Ian Devlin є відмінна стаття Пояснення техніки стека. У ній він пояснює, як контролювати порядок елементів з допомогою table-caption, table-header-group і table-footer-group.

Висновок

Flexbox’ом на сьогодні дуже навіть можна користуватися. Після стількох років розробки, специфікація, нарешті, стала більш-менш стабільною, дозволяючи досягти висот, які раніше були тільки в мріях. Також раджу подивитися статтю Wes Bos Що таке Flexbox?. Простий прискорений курс з 20 відеороликів допоможе вам опанувати flexbox безкоштовно! Перші 13 відео розповідають про засади; 7 залишилися роликів це суцільний кодинг. Wes створює все від меню до повних мобільних версій сайтів. І все на чистому flexbox! Після цього курсу ви просто не зможете не використовувати flexbox в своїх проектах.