Разрушение мифов о Flexbox

Перевод статьи FLEXBOX MYTH BUSTING  с сайта jonyablonski.com, опубликовано на css-live.ru с разрешения автора — Джона Яблонски.

Если вы периодически пишете CSS, то скорее всего слышали про «flexbox» (Модуль раскладки гибких боксов). Возможно, вы даже слышали, что flexbox способен решить множество проблем, которые, как считается, трудно, а то и невозможно решить без помощи Javascript. Вероятно, вы даже слышали или сами считаете, будто использовать flexbox пока рановато. В этой статье я развею множество «мифов», которые окружают эту мощную модель раскладки.

Миф #1: Flexbox тормозит

С момента первого появления в 2009 году CSS-модуль раскладки гибких боксов претерпел много изменений. В ходе развития спецификации и реализаций в браузерах возникло несколько версий синтаксиса (прим. перев. перевод на css-live.ru). В 2013 году исследование конкретного примера Smashing Magazine выявило проблемы с производительностью, связанные с использованием исходного (устаревшего) flexbox, который использует «display: box». Эти проблемы с производительностью уже исправлены в новой версии, которая использует «display: flex», и которая в 2.3 раза быстрее старого flexbox.

Миф #2: У Flexbox пока нет хорошей поддержки

Вопреки живучему предрассудку, браузерная поддержка flexbox — прекрасная (83% по общемировой статистике на конец 2015 года). С полной поддержкой в последних релизах любого основного браузера можете начать использовать flexbox в вашей работе ни за что не опасаясь. Кроме того, можно поддерживать старые версии браузера, примешивая синтаксис из ранних версий flexbox и используя браузерные префиксы.

Во многих случаях, свойства flexbox могут сосуществовать с не-флексбоксными свойствами. Это позволяет использовать для базовой раскладки плавающие блоки или таблицы, а затем переопределять эти свойства с помощью flexbox в поддерживающих браузерах. В случаях, когда это не сработает, определение возможностей позволит выбирать поддерживающие/не поддерживающие браузеры отдельно. Такой подход очень удобен для браузеров типа >=IE9, где  запасное решение необходимо, пока вы поддерживаете эти браузеры (по общемировой статистике на конец 2015 у IE9 поддержка порядка ~1%).

Миф #3: Flexbox слишком сложный

Как и всё новое, синтаксис flexbox может показаться сложным на первый взгляд. Обычно разработчикам приходилось полагаться на таблицы, плавающие или строчные блоки, каждый их которых имеет ограничения и чреват недостатками. С flexbox у разработчиков теперь есть более эффективный способ раскладки блоков, выравнивания и распределения пустого пространства вокруг элементов в контейнере. Особенно это удобно в адаптивной вёрстке, где требуется гибкость. Для этой гибкости, нам нужен более надёжный метод управления раскладкой.

Но flexbox не такой уж и сложный — просто он заставляет думать о веб-раскладке по-другому. После понимания того, как он работает, вы непременно осознаете его мощь. Кроме того, в вебе полно ресурсов, которые помогут вам изучить синтаксис flexbox (воспользуйтесь «Полным руководством по Flexbox» от Криса Койера или этим удобным инструментом Беннета Фили, для начала)

Как видите, преград использованию flexbox в вашей работе теперь либо не существует, либо их легко обойти. С его помощью можно не только добиться того, что раньше считалось невозможным без Javascript, но и улучшить раскладку в поддерживающих браузерах, не затрагивая старых. Так что будьте смелее и начинайте использовать flexbox.

P.S. Это тоже может быть интересно:

1 Комментарий

  1. Peter

    Флекс-боксы — это прекрасно. Освоить их не так уж и сложно, а польза налицо! Правда, я столкнулся с тем, что моя игровая консоль не поддерживает флексбоксы, хреново, конечно.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.