Страницы

Поиск по вопросам

среда, 12 июня 2019 г.

Использование flexbox - актуально ли сегодня? [закрыт]

Я не уверена, что задам правильный вопрос. Делаю это впервые, прошу сильно не ругаться если что, но тем не менее.. Господа верстальщики и frontend разработчики, подскажите, насколько правильно, актуально и оправдано переходить на flexbox? Понятно, что при условии поддержки только современных браузеров (в том числе, осла с 11й версии).
Почему спрашиваю - с одной стороны, на ресурсе что ни вопрос по верстке - то flexbox, значит, коллеги юзают активно. С другой стороны, через вопрос поднимается тема багов, не срабатывание свойств и т.д. Так что такое верстка на flexbox сейчас - борьба с багами и удар по кроссбраузерности, или же - приятный способ облегчить себе жизнь? Как часто вы сами используете эту технологию, в каких случаях рекомендуете, удобны ли они в последующей поддержке сайта?
А то вроде бы и хочется, и колется. И чувство, что я со своими инлайн-блоками и выравниваниями где-то в прошлом веке застряла. Заранее большое спасибо за ответ!


Ответ

Я бы выразился точнее - на флексбокс переходить не нужно, - его нужно использовать вместе с остальными возможностями. Поясню на примере. Очень часто верстальщики используют Bootstrap, в котором гриды реализуются с помощью свойства float. В четвертой версии бутстрапа авторы решили использовать флекс для сеток. Видимо поэтому четвертая версия до сих пор в стадии бэты, поскольку явно ожидается появление технологии Grid. Потому и не спешат с релизом. Поэтому-то "переходить на флексбокс" в том смысле, чтобы заменить им сетки, не стоит. Но вот использовать эту технологию для решения других задач по верстке крайне рекомендуется. Например, очень хорошо это использовать при верстке шапок. Это можно посмотреть в примере кода.
.page-header { display: flex; justify-content: space-between; align-items: center; background-color: #f3f3f3; width: 640px; height: 60px; } .page-header nav a { display: inline-block; padding: 5px; }


Три блока в контейнере шапки благодаря флексу равномерно распределяются по ширине, а также выравниваются по вертикали. То есть, достаточно применить стиль лишь к контейнеру .page-header, чтобы добиться желаемого результат для дочерних элементов без лишних float'ов и сеток. Поэтому флексбокс нужно просто включать в практику верстки наравне с остальными приемами. И ждать окончательного внедрения гридов ))

Комментариев нет:

Отправить комментарий