Прокладаємо дорогу до гнучкого майбутнього веб-дизайну за допомогою Flexbox

22

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

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

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

Мислення Flexbox

Flexbox змушує мислити інакше. Якщо зазвичай ми розставляємо зліва направо і рядами/колонками зверху вниз, то в цьому випадку ми виставляємо блоки в лінію – а за фактом дві, основна вісь та її перетинає. Про першу ми сьогодні з вами поговоримо. Уявіть, що основна вісь це мотузка, вздовж якої натягнуті «коробки» (DIV и або інші елементи HTML). Вигадана мотузка тягнеться від одного кінця контейнера до іншого, туго натягнута і невидима. Ці міркування наводять на 4 цікаві концепції.

Вирівнювання

Перше, що приходить в голову, ми можемо розташувати наші «коробки» все лівого або правого краю, по центру або розподілити їх рівномірно по всій ширині. Отже, об’єкти можуть прилипати як лівої, так і правої сторін макета – лівого або правого краю екрана, ширина екрану не має значення. Навіть розподіляючись по всій ширині, означає, що блоки адаптуються під будь-який розмір екрана, ідеальний розмір в нашому мультиэкранном світі.

Прокладаємо дорогу до гнучкого майбутнього веб-дизайну за допомогою Flexbox

Flexbox дозволяє дизайнерам зрушувати елементи до будь-якого краю нашої «мотузки»

Напрямок

Також ми можемо розгорнути нашу рядок так, що блоки будуть рухатися в протилежному напрямку, і для цього нам не треба редагувати HTML. Дуже схоже на метод сортування. Цей метод допомагає розгорнути колонки — крім третьої, яка залишається на місці.

Прокладаємо дорогу до гнучкого майбутнього веб-дизайну за допомогою Flexbox

Можна перевернути як порядок, так і позицію елемента

Орієнтація

По-третє, ми можемо повернути мотузку на 90 градусів. Тепер мотузка тягнеться не від краю до краю, а зверху вниз. З допомогою можливостей Flexbox і медіа запитів можна змусити, скажімо, відображатися шапку, блок статей і футер зверху вниз на смартфонах і зліва направо на настільних комп’ютерах. Трохи CSS і те, що раніше називалося рядами, тепер може розташовуватися як зверху вниз, так і знизу вгору.

Прокладаємо дорогу до гнучкого майбутнього веб-дизайну за допомогою Flexbox

Вся верстка може бути повернена на 90 градусів, «звисаючи зі стелі контейнера

Порядок сортування

І нарешті, ми контролюємо те, який елемент буде займати перше, друге, третє чи навіть четверте положення на мотузці, і не потрібно редагувати HTML. Це сильно. Це означає, що ми можемо структурувати HTML документ на SEO, на предмет доступності або просто семантично — залежить від шаблону. Захотілося вертикально центрувати елементи? Не проблема. Хочете перенести меню з футера вгору? Без проблем. Хочете поекспериментувати з різними макетами? Все залежить тільки від CSS. І ось ми вже думаємо в термінах контенту і пристроїв, а не в термінах жорсткої сітки.

Прокладаємо дорогу до гнучкого майбутнього веб-дизайну за допомогою Flexbox

Порядок елементів можна змінити за допомогою CSS HTML чіпати не потрібно

Насправді є ще багато чого розглянути, але це база. Згадаймо:

Блоки висять вздовж невидимої лінії.

Ми можемо штовхати їх туди-сюди вздовж лінії.

Ми можемо розгорнути лінію, тим самим розгорнувши порядок блоків.

Лінію можна повернути на 90 градусів.

В незалежності від розмітки ми можемо перемішувати елементи уздовж лінії в будь-якому порядку.

Порядок

Порядок займає важливе місце в Flexbox. Візьмемо базовий HTML документ: Типовий пост з блогу містить певну інформацію.

Заголовки. Назва сайту, опис, форма пошуку (Вони призначені, щоб дати користувачеві уявлення про те, куди він потрапив)

Мета дані. Автор/видавець, дата, тема(и) (Це допомагає користувачам зрозуміти, чи підходить контент їх запитами)

Основний контент. Власне, про сторінка (Причина існування сторінки)

Меню. Посилання на інші розділи сайту (Розділи верхнього рівня)

Футер. Копірайти, RSS, соціал медіа, підписка на розсилку

Ці елементи розташовані в тому порядку, в якому їх сканують пошуковики та інші скрін рідери. А тепер візьмемо вертикальну мотузку і розставимо ці елементи в порядку важливості для настільних комп’ютерів і мобільних пристроїв.

Основний контент

Мета дані

Додатковий контент

Заголовки

Меню

Футер

А для настільних ПК список буде виглядати так.

Заголовки

Мета дані

Основний контент

Додатковий контент

Меню

Футер

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

Вкладені нитки та блоки

Кожен Flexbox шаблон – кожен блок може містити усередині себе інший набір блоків з нитками. Ці нитки можуть пролягати зліва направо і навпаки, зверху вниз і навпаки, а також блоки можуть розташовуватися як з лівого, так і по правому краю, по центру або по ширині. Так як така гнучкість дає нам великий простір, необхідно обережно проектувати наш макет.

Прокладаємо дорогу до гнучкого майбутнього веб-дизайну за допомогою Flexbox

Елементи вздовж осі також можуть утримувати свої flexbox осі і елементи

Давайте розберемо приклад, щоб зрозуміти, чому це трохи складніше; порядок не обов’язково звичайний (тобто в тому, в якому люди бачать його). Уявіть, що ви розповідаєте презентацію. Спочатку ви даєте вступ, потім розповідаєте основну частину і робите висновок. Наша вигадана сторінка має таку ж структуру:

Заголовки

Основне повідомлення

Список повідомлень

Посилання на вхідні повідомлення, архіви

Футер

Малюємо дизайн

Для простоти будемо працювати з схожим макетом.

Прокладаємо дорогу до гнучкого майбутнього веб-дизайну за допомогою Flexbox

Типове розташування елементів на поштовому сайті

У нашому прикладі два шаблону Flexbox. Перший містить три блоки, розташованих вертикально. Другий шаблон знаходиться в межах середнього елемента, і його блоки розташовані справа наліво.

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

Розмічаємо документ

У зовнішньому контейнері всього три секції, обгорнутих блоком .flex-container:



Блок-обгортку ми назвали flex-container щоб описати семантично його призначення. Принаймні в нашому CSS буде якийсь сенс. Всередині блоку main нам необхідно розмістити три блоку:

У прикладі article використовується, як незалежний елемент, що не в його значенні.

Повісимо на ці елементи Flexbox

Необхідно сказати браузеру, що це гнучкі елементи.

.flex-container,
.flex-container header,
.flex-container footer {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

Зверніть увагу на те, що цей код застосовує Flexbox до основних контейнерів, не до контенту.

Додамо трохи розмірів

Грунтуючись на розмірах нашого малюнка, ми знаємо точні розміри елементів. Шапка і футер body, приміром, будуть довгі, тонкі смуги в порівнянні з висотою блоку main і щодо лівих панелей навігації. Область всередині блоку article займає простір, що залишився. Щоб наш макет залишався гнучким (для наочності у цьому уроці), ці області не будуть мати фіксованої ширини.

.message {
flex-basis: 70%;
}
.message-list {
flex-basis: 15%;
}
.mailbox-list {
flex-basis: 15%;
}
.flex-container header,
.flex-container footer {
width: 100%;
height: 5rem;
}

flex-basis працює як ширина – довгий настільки, наскільки простягається горизонтальна вісь. Якщо перевернути вісь на 90 градусів, flex-basis стає висотою. Зручно!

Додаємо прокручування до основної секції

Це вже легше. Просто додамо overflow: scroll до блоку main, щоб він не залазив на шапку і футер. Підказка: можна використовувати overflow: auto щоб ховати смугу прокручування в більшості браузерів, коли вона не потрібна.

Тестуємо контент

На даний момент форма шапки повинна мати невеликий зовнішній відступ, навіть при зміні вікна браузера. Контент повинен добре відображатися у вікнах будь-якого розміру. А якщо браузер не підтримує Flexbox, то сторінка повернеться до шаблону content-first.

Це дуже важливо, адже ви знаєте, хто у нас все ще не підтримує Flexbox. Кожен сучасний браузер підтримує flexbox, але питання в тому, коли ж користувачі оновлять ЗА своє. Де ж підтримується flexbox?

Chrome 31и вище

Firefox 31и вище

Internet Explorer 10 і вище

Safari для Mac версія 7 і вище

Safari для iOS 7.1 і вище

Android браузер 4.4 і вище

Chrome для Android 4.2 і вище

Opera 27 і вище

На сайті Clicky є графік часткою ринку мобільних браузерів. А щодо старих браузерів? Способи вирішення різні, все залежить від складності макету. І все ж можна дати п’ять порад.

Найбезпечніший спосіб підтримувати підтримуються браузери це писати CSS в порядку мислення. Почніть думати семантично. Старі версії IE ігнорують властивості flexbox – на щастя, старі добрі умовні коментарі допоможуть застосувати обтікання і clear фікси. Для старих версій інших браузерів є макети мобільних версій, в яких вміст розташовується вертикально в логічному порядку. Так що flexbox може співіснувати з обтеканиями, display: table cell і позиціонуванням. Розумні браузери будуть використовувати flexbox властивості, в той час як старі будуть їх ігнорувати. І, врешті-решт, якщо вирішили поекспериментувати, спробуйте Flexie. Даний полифил використовує JavaScrip, щоб старі браузери підтримували властивості flexbox.

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