От автора: если коротко: да. Как front-end разработчик, я иногда задаюсь вопросом: «ого, крутая штука. Можно ли ее использовать в продакшене на работе, или в теории это звучит лучше, чем на практике?». Я все время перечитываю CSS спецификации, чтобы понять, улучшит ли новая технология мой веб-дизайн, упростит ли она мой код, станет ли код короче.
Flexbox отлично подходит для адаптивного дизайна
Flexbox нельзя назвать новой технологией… НО за последние пару лет появилось очень много новых мобильных устройств, и всем им нужны гибкие, адаптивные макеты и шаблоны. Как минимум вам стоит подумать о включении flexbox в свой следующий проект, если вы еще не сделали этого. И не беспокойтесь, flexbox можно использовать вместе с любым фреймворком. Я вот до сих пор пользуюсь модифицированной версией Skeleton Grid, в который я добавил пару SASS переменных и миксинов. Если действительно хотите поиздеваться над собой, попробуйте использовать flexbox с единицами измерения vh и vw вместо пикселей и процентов.
А что с совместимостью десктопных браузеров?
Без паники, я все расскажу. Посмотреть совместимость с браузерами можно на CanIUse.com. На момент написания статьи flexbox поддерживается во всех современных браузерах кроме IE 11, у него «частичная поддержка». Если учитывать в работе известные баги и исправлять их, это не будет проблемой.
Так что, с IE опять одни проблемы, да?
Да, но их доля на рынке настолько мала, что я бы даже не переживал. Можете посмотреть последнюю статистику по доле IE на рынке на сайте W3C. На момент написания статьи доля IE10 и более старых версий составляет 0,4% от ВСЕХ БРАУЗЕРОВ (см. скриншот 1.1). Прежде чем использовать flexbox в следующем проекте, проанализируйте свою аудиторию. Большая часть ваших пользователей должны сидеть как минимум на IE10 и выше.
Я понял, поддержка хорошая. С чего тогда начать?
Чтобы не воссоздавать уже существующие демо на flexbox, прочитайте статью «полное руководство по Flexbox» признанного CSS-гуру Криса Койера, а также «визуальное руководство по свойствам CSS3 Flexbox» Димитара Стоянова. В обеих статьях очень хорошо объясняются Flexbox правила. Я очень часто сам возвращаюсь к этим статьям, когда пытаюсь встроить Flexbox в свои макеты… в них очень много полезного и нового для меня.
Посмотрите демо.
Вот так я использую flexbox в своей работе
В программировании есть одна мантра, которую вы будете слышать очень часто, «не повторяйся» или по-английски «Don’t Repeat Yourself», или просто DRY. Чтобы не раздувать свой код, я встроил flexbox в работу при помощи замечательной библиотеки SASS миксинов, которая берет на себя всю заботу о вендорных префиксах. Не слышали про SASS? Вам нужно прочитать мою последнюю статью.
Миксин ниже позволяет мне вызывать все пять объявлений flexbox в одну строку:
|
1 2 3 4 5 6 7 8 9 10 |
@mixin flexbox { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .element { @include flexbox; } |
Очень просто. Учитывая все Flexbox правила, это сильно экономит время. Как я думаю, скоро префиксы вообще не будут нужны, так как все основные браузеры начали принимать синтаксис. Но эта библиотека миксинов должна заполнить этот пробел на какое-то время.
Я подробно рассказал про плюсы, а также как интегрировать flexbox в работу. У вас мог остаться вопрос: «как ты на самом деле используешь flexbox в дизайне?». Ну… я использовал flexbox на недавно запущенном сайте Next Door Milwaukee.
В этом проекте арт-директор дизайна захотел сделать плотную сетку без разделителей между колонками, а также вертикально центрированный текст на перекрывающем слое (см. скриншот 1.2). С вертикальным центрированием возникли проблемы, большая часть сообщества веб-разработчиков отказались от таблиц в макетах. Но мы с легкостью вышли из ситуации при помощи «align-items: center;», правила Flexbox.
С помощью Flexbox я с легкостью нормализовал высоту элементов сетки, несмотря на контент. И не пришлось явно задавать высоту, из-за чего внешний вид стал более однородный, а блоки могут автоматически увеличиваться и уменьшаться по необходимости. Отлично подходит для адаптивных сайтов. Ниже приведен пример прямо с Next Door Milwaukee:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<section id="section-1" class="dualCTAbox flexcontent row"> <div class="ctaBox" style="background-image:url('image_1.jpg');"> <a href="#"> <div class="icon"><img src="icon1-108x72.svg" width="52" height="35" alt="Section Title 1"></div> <h5>Section Title 1</h5> <p>Tation aliquip vulputate ex sit facilisis accumsan te eu nonummy feugait autem.</p> <div class="btnWrapper"><span class="button button-primary">Learn More</span></div> </a> </div> <div class="ctaBox" style="background-image:url('image_2.jpg');"> <a href="#"> <div class="icon"><img src="icon2-108x72.svg" width="52" height="35" alt="Section Title 2"></div> <h5>Section Title 2</h5> <p>Tation aliquip vulputate ex sit facilisis accumsan te eu nonummy feugait autem.</p> <div class="btnWrapper"><span class="button button-primary">Learn More</span></div> </a> </div> </section> |
SASS (и вложенный CSS):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.dualCTAbox { @include flexbox; @include align-items(stretch); @include align-content(stretch); @include flex-wrap(wrap); .ctaBox { text-align:center; @include align-self(stretch); @include flexbox; a { @include flexbox; @include align-items(center); @include justify-content(center); @include flex-wrap(wrap); @include align-content(center); div, h5, p { width: 100%; margin-bottom: .8em; line-height: 1.2em; } h5 { margin-bottom: 0; line-height: 1.2em; } width: calc(100% - 40px); padding: 20px; min-height: 240px; } .button{ margin-bottom: 0; } } } |
Если теперь добавить CSS медиа запросы, то ширина элементов будет подстраиваться под ширину окна браузера. Можно даже менять порядок отображения элементов в браузере. Особенно важно на мобильных устройствах, когда нужно думать о пользователе и менять положение элементов меню, сайдбара и CTA элементов, чтобы достичь наилучшего пользовательского опыта на небольших экранах.
Если вы еще не используете flexbox, попробуйте, хороший инструмент. На дворе уже 2017 год, давайте двигаться вперед.
Автор: Martin Defatte
Источник: //medium.com/
Редакция: Команда webformyself.
