Будуємо з Flexbox
Якийсь час тому я написав ознайомлювальну статтю про flexbox на сайті SitePoint. У цій статті я постарався з'ясувати та відповісти на запитання: А чи готові ми використовувати flexbox?
Минулого разу я говорив, що вам слід дуже акуратно використати цю можливість, але наполягав на тому, що потрібно обов'язково познайомитися з її синтаксисом та впроваджувати її у сучасні проекти. Зараз я радий, що можу дати позитивну відповідь на своє запитання: Так, ми готові використати flexbox!
Якщо ви ще не знайомі з flexbox (флексбокс), то невелике пояснення. CSS модуль побудови гнучкої розмітки - це розмічальний модуль, що дозволяє легко розміщувати блоки на екрані, у межах виділеного простору. Це велике досягнення проти класичної блокової моделлю, т.к. Флексбокс дозволяє взагалі не використовувати властивість float. Блоки (бокси) можуть бути об'єднані в рядки або розбиті на колонки. Для кожного флексбокс-елемента може бути заданий певний порядок. А також можна відразу управляти вирівнюванням, відступами та розмірами цих елементів.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Мабуть, що в цій статті мені не вдасться розглянути кожен аспект даного модуля, тому я пропоную вам познайомитися з ним детальніше, перейшовши за посиланням на сайт MDN. А в цій навчальній статті ви розглянемо поширені проблеми з розміткою і побачимо, як легко та швидко їх можна вирішити. Кожен шаблон розмітки, про який я розповім, буде чуйним, що ще більше підкреслить ту легкість, з якою можна створювати розмітку за допомогою флексбоксу. Ось що ми розглянемо:
Проста сіткова система
Розмітка СвященногоГрааль
Гумова навігація з шириною поля пошуку, що змінюється.
Два різні варіанти вертикального вирівнювання
Добре, давайте приступати
1 - Проста сіткова система
Сьогодні сіткові системи присутні в більшості розміток проектів, і класична поведінка блокової моделі в CSS змусила нас вдатися до використання плаваючих або малих блоків, кожен з яких має власні недоліки. Флексбокс дозволяє нам легко створювати дійсно класну та масштабовану сіткову систему завдяки написанню всього кількох рядків у CSS. Давайте розглянемо це докладніше. Уявіть, що у нас є наступна проста розмітка:
При традиційному підході створення сітки нам довелося б якось визначити, скільки елементів може поміщатися в один рядок, а потім встановити ширину для кожного елемента сітки. А за допомогою флексбокс ми можемо додавати в рядок стільки елементів, скільки захочемо, і їхня ширина сама підлаштовуватиметься під загальну ширину рядка. Іншими словами, у нас може бути наступна розмітка, і при цьому нам не потрібно хвилюватися про вказівку кількості елементів у кожному рядку CSS:
А тепер погляньмо на CSS код. Деякі властивості я використовував чисто в естетичних цілях (наприклад, рамки та внутрішні відступи), а в іншому все дуже просто:
От якось так! І наша сітка вже готова до використання. Додаючи display: flex до контейнерів .grid__row, ми створюємо так званий флекс-контейнер, а кожен дочірній елемент у контейнері відразу стає флекс-елементом. Застосовуючи властивість flex: 1 до флекс-елементів, ми змушуємо їх посідати однакову кількість місця щодо загальної ширини контейнера. Тепер у вас може бути скільки завгодно рядків у сітці, а в кожному з нихможе бути власна кількість сіткових елементів. І це буде проста повністю чуйна сітка без будь-якого додаткового CSS.
А що можна сказати щодо брейкпойнтів (контрольних точок) та колонкової розмітки? Якщо ми хочемо, щоб елементи сітки вишиковувалися в колонки, а не в рядки, то ми можемо просто оголосити властивість flex-direction: column для контейнерів із класом .grid__row. У цьому випадку ми можемо створити дуже просту чуйну сітку, внісши деякі зміни. І наша розмітка буде виглядати так:
А наш CSS ось так:
І вуаля. Супер-проста чуйна сітка довжиною всього в кілька CSS рядків. Ця система настільки непробивна, що ви навіть можете вкладати сітки одна в одну, не переймаючись наслідками:
2 - Розмітка Священного Граалю
Розмітка Священного Грааля є досить відомою у веб-дизайні, і навіть в епоху веб-застосунків та інших веселощів, даний варіант розмітки, як і раніше, відіграє важливу роль у вебі — така розмітка постійно використовується на сайтах, у яких багато контенту. Ще у 2006 році розмітка Священного Грааля була чудово розібрана та описана на сайті A List Apart. У ній використовуються плаваючі елементи (властивість float), негативні зовнішні відступи (властивість margin) та мінімальні значення для ширини (властивість min-width), щоб суміщені розміри елементів не конфліктували один з одним і не ламали розмітку. І все це, з огляду на нинішню необхідність у створенні чуйної розмітки, означало використання великої кількості обчислень, скасування обтікання та інших трюків, щоб це все працювало правильно. І якщо ви вирішили змінити ширину бічної колонки (сайдбара), то потрібно було заново робити всі обчислення.
Флексбокс дозволяє позбутисясуттєвого головного болю, т.к. ми можемо визначити колонкову або рядкову розмітку, а також явно вказати порядок проходження елементів у CSS, навіть якщо вони розташовані в іншому порядку в нашій розмітці. Ось типовий приклад створення розмітки Священного Граалю:
У моєму демо прикладі розмітка Священного Грааля знаходиться всередині документа, тому в ній немає тегів body або main, як це показано вище. Тим не менш, ми зацікавлені в іменах класів та появі розділів у нашій розмітці на відміну від самих елементів. Зокрема, зверніть увагу на класи-модифікатори, які використовуються для двох бічних колонок, та на той порядок, в якому вони йдуть у розмітці. Давайте послідовно розглянемо, що відбувається:
У нас є батьківський контейнер, .holy-grail, а в ньому ми маємо три флекс-елементи. Це елементи з класами .holy-grail__header, holy-grail__body та holy-grail__footer.
Ці три елементи розташовані один над одним і займають 100% від ширини екрану. Таким чином, для флекс-контейнера має бути заданий колонковий напрямок.
Тіло нашої розмітки, holy-grail__body, є внутрішнім флекс-контейнером. Його дочірні флекс-елементи повинні мати колонкову розмітку на невеликих екранах та малий розмітку на широких екранах.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Враховуючи все сказане вище, давайте побудуємо розмітку Священного Грааля:
Це справді настільки просто! Як я вже згадував, ми спочатку визначаємо два флекс-контейнери (для невеликих екранів). Для першої контрольної точки ми змінюємо флекс-напрямок у тіла розмітки на рядковий, а бічним колонкам задаємоширину 180px, використовуючи скорочений запис - властивість flex. Цей запис дозволить нам обмежити значення для властивостей flex-grow та flex-shrink, а також явно вказати ширину. Для контенту використовується властивість flex: 1 щоб він заповнював доступний простір. Розташування флекс-елементів у потрібному порядку також виявилося дрібницею завдяки властивості order. Мабуть, залишилися лише додаткові стилі, які ви захочете додати з естетичного погляду… а в іншому це справді просто та ефективно. А чи я згадав про те, що за умовчанням флексбокс створює колонки однакової висоти?
Погляньте на цей демо приклад.
3 — Гумова навігація з шириною поля пошуку, що змінюється.
У наступному прикладі ми будемо створювати щось веселе, що включає красивий перехід. Ми створимо гумову навігацію, яка розтягується на всю ширину, а в ній ми розмістимо поле пошуку, яке плавно розтягуватиметься у стані фокусу. Використовуючи силу флексбоксу, ми зможемо додати стільки пунктів меню, скільки захочемо, не змінюючи CSS. Я використовуватиму деякі класи-модифікатори для досягнення потрібного результату. Як невеликий бонус я збираюся зробити нашу навігацію повністю чуйною, додавши для неї кнопку-перемикач! Ось як виглядатиме HTML:
Давайте розберемо цю розмітку, перш ніж ми перейдемо до CSS. У нас є основний флекс-контейнер із класом .flexy-nav. Кнопка використовується як перемикач, у ненумерованому списку містяться пункти основного меню, а у формі міститься поле пошуку. Для невеликих екранів нам потрібно використовувати колонкову розмітку для всіх трьох елементів, а також потрібно, щоб кожен пункт меню розташовувався в окремій колонці. На широких екранах нам потрібно сховати кнопку.перемикач, побудувати елементи списку в рядок і встановити фіксовану ширину форми. Елементи списку будуть рівномірно розподілені серед простору, що залишився. Коли ми перемикаємось на текстове поле (поле пошуку), нам хотілося б, щоб воно плавно розтягувалося по ширині, а всі елементи списку, навпаки, плавно звужувалися. Ось CSS:
Так все просто. Ми щойно створили красиву і масштабовану гумову навігацію за допомогою флексбоксу, а також вбудували плавний перехід при зміні ширини поля пошуку. Ми можемо скільки завгодно додавати або видаляти посилання, а також на льоту змінювати розміри поля пошуку. І при цьому функціональність нашого меню не постраждає. Ах, ось вони принади флексбоксу. Не забудьте подивитись відповідний демо-приклад.
4 — Вертикальне вирівнювання
Давайте визнаємо той факт, що вертикальне вирівнювання у традиційному CSS просто нікуди не годиться. Рядково-блокові елементи можуть іноді з цим допомогти, є також хакі з абсолютним позиціонуванням, а ще є застарілі табличні розмітки (які зараз неприйнятні для багатьох випадків з семантичної точки зору). Всі ці способи мають свої особливості, і вони точно вимагатимуть від вас додаткових «танців з бубнів», щоб усе працювало, як треба.
Флексбокс легко візьме це на себе. Ми розглянемо два приклади вертикального вирівнювання:
Потім просто розглянемо вертикальне (горизонтальне) вирівнювання елемента фіксованої ширини і змінної висоти всередині контейнера. Елемент залишатиметься розташованим точно по центру, незважаючи на збільшення висоти.
Harry Potter
I'm Harry Potter. . . with a really long description . . . / p & gt;
Перш ніж ми перейдемо до CSS, зверніть увагу на те,що ми будемо використовувати незнайому до цього властивість. Це властивість align-items, і дозволяє нам вирівнювати елементи вздовж, так званої, флекс-лінії в перпендикулярному напрямку. Іншими словами, якщо наша флекс-лінія розташована горизонтально, то ми можемо вирівнювати наші елементи у напрямі, який перпендикулярний даній лінії. У нашому випадку нам потрібно вирівняти елементи центром, тому ми будемо використовувати значення align-items: center. Ось CSS:
Давайте перейдемо до другого прикладу. На цей раз уявіть, що у нас є банер, розташований у верхній частині розмітки. І ми хочемо розмістити всередині банера якийсь заголовок. На маленьких екранах висота банера дорівнюватиме 180px, і вона буде змінюватися ще двічі, до значення 480px. І при всіх змінах висоти банера нам потрібно, щоб текст всередині був ідеально розташований по центру (як по горизонталі, так і по вертикалі). Ось стандартна розмітка:
На цей раз ми задіяли також властивість justify-content, яка дозволить нам розподілити простір навколо елементів вздовж флекс-лінії. А ось CSS:
Не має значення, наскільки «високим» буде банер. Контент завжди буде ідеально відцентрований по горизонталі та вертикалі. Ось у цьому і полягає міць флексбоксу. Не забудьте подивитись демо-приклад.
Підтримка та вендорні префікси
Ви повинні знати ваш ринок та аудиторію… це ключовий момент. Флексбокс підтримується у всіх сучасних браузерах, включаючи IE10 та вище. Якщо ви займаєтеся створенням сучасних веб-додатків, то флексбокс це потужний інструмент, і я дуже рекомендую його використовувати. Якщо ви створюєте або переробляєте веб-сайт, перевірте статистику відвідуваності, щоб дізнатися вашу аудиторію. В даний час є ймовірність того, що близько 99% вашоїаудиторії використовуватиме сучасні браузери.
Щодо вендорних префіксів, то у флексбоксу їх багато. Це дуже нерозумно всерйоз використовувати флексбокс і при цьому вручну прописувати усі вендорні префікси. Особисто я використовую для цього збирач проектів (Gulp). Думаю, вам слід серйозно подумати про використання збирачів проектів у вашій роботі, навіть якщо ви не використовуєте флексбокс.
Висновок
Автор: Nick Salloum
Редакція: Команда webformyself.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3