Кому нужны флексы


    Кому нужны флексы, если на них не делают сайты?

    Делают, 12% сайтов уже используют флексы. А нужны они всем нам, чтобы было удобнее верстать.


    Флексы, или Flexible Box Layout, с нами аж с 2006 года. Это получается одиннадцать лет! Их тогда внедрили в Mozilla для построения интерфейсов Firefox. Представьте себе, что вы настраиваете панель браузера: кнопочки разбегаются по краям, отталкиваются и ровно встают по горизонтали. Самый настоящий флексбокс. В 2009 году Mozilla предложила добавить эту систему в CSS.


    С тех пор много чего случилось: тот самый первый флекс появился в Safari и других браузерах на WebKit. Вторая версия появилась в IE 10 в 2012 году. Флексы в текущем виде, с переносами flex-wrap, стали широко поддерживаться в 2014 году с выходом Firefox 28. Сейчас почти 98% браузеров по миру поддерживают флексбокс хоть какой-то версии. Даже Opera Mini на последнем вздохе движка Presto научилась флексам.


    Зачем они вообще нужны? Это первая система раскладки в CSS, которая не хак. Таблицы, флоаты и инлайн-блоки придумали совсем для другого. Представьте три простых примера. Колонки одинаковой резиновой высоты: одна растёт по содержимому, другие идут за ней, что бы ни было. Или горизонтальный блок, внутри элементы распределены равномерно, сколько бы их ни было. Или блок произвольных размеров внутри родителя — ровно по центру.


    Знаю, знаю — всё это можно имитировать десятком способов. CSS очень гибкий и кроме флоатов, инлайн-блоков и табличных свойств, можно применять хитрое позиционирование. Сам много лет это имитировал и набил руку на хаках и трюках. Но по-настоящему просто и явно это делает только флекс.


    .center {
      position: absolute;
      top: 50%; left: 50%;
      transform:
        translate(
          -50%, -50%
        );
    }

    Что это вообще такое? Флекс — это такой контекст форматирования: вы задаёте родителю display: flex и его дети начинают подозрительно хорошо себя вести. Ещё есть старинный контекст display: table, когда блоки прикидываются внутренностями таблицы, и совсем новый — грид, ещё круче флекса. Гриды и флексы имеют кое-что общее и очень ценное.


    Мало раскидать резиновые блоки, это можно сделать хоть на флоатах. Нужно ещё сказать, где они начинаются по главной оси, как делят пустое место внутри родителя и как выравниваются поперёк оси — во флексах ведь можно менять её направление. Этими вопросами занимается отдельная спецификация Box Alignment.


    .flex {
      display: flex;
      justify-content:
        space-between;
      align-items:
        stretch;
      flex-direction:
        column;
    }

    Флексы и гриды включают Box Alignment для своих детей и это то, чего нам всем очень не хватало. Когда-нибудь свойства justify-content, align-self, justify-items и другие заработают в других контекстах. Ведь до сих пор самый популярный вопрос по вёрстке — это как выровнять блок по вертикали. Проще всего это сделать на флексах.


    Ладно, флексы классные, дайте две. Но почему тогда главные студии страны выпускают сайты для главных компаний страны, где всё по-прежнему на флоатах? А для надёжности иногда даже на таблицах. Варианта здесь два: либо им нужна поддержка IE 9, либо там работают упёртые староверы. У них всё и так работает на флоатах, зачем что-то менять?


    Оставим консервативных верстальщиков в покое и разберёмся с браузерной поддержкой. Если вам нужны старые Android 4.3, iOS 6 или Firefox 27, то флексы у вас будут только в одной строке, без переносов: flex-wrap там ещё не работает. Сделать удобный список карточек одинаковой высоты, которые переносятся друг за другом по строкам, не получится.


    В старых WebKit и в очень старом Firefox 21 поддерживается версия флексбокса 2009 года с немного другим синтаксисом, за префиксами -webkit и -moz. В IE 10 и 11 синтаксис уже ближе к современному и с поддержкой переносов, но за префиксом -ms. Если вы пишете современный флекс, а потом расставляете префиксы с помощью Автопрефиксера, то он вам добавит старых свойств, чтобы всё работало как нужно. Но никакой магии: переносы не заработают и баги никуда не денутся.


    .flex {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
    }

    Про баги отдельно: в старых реализациях с префиксами в Firefox, Safari и IE багов хватает. Но все они более-менее описаны в коллекции Flexbugs Филипа Уолтона. Прежде всего, вам нужно определиться с браузерами, которые вы поддерживаете и может быть вместо старых флексов с префиксами просто отдать им флоаты?


    Да, это самое приятное: вы можете сделать простую вёрстку на флоатах или в контексте table, а потом объявить display: flex и сделать ещё лучше для браузеров которые умеют флексы. Сайты не должны выглядеть одинаково во всех браузерах, что бы там ни требовали заказчики. Тем более в старых, где главная задача — сохранить доступное содержимое.


    Флоаты придумали чтобы текст обтекал картинку и нашей вёрстке давно пора перестать куда-то плыть. Мы в Академии уже перевели программы базового и продвинутого интенсивов по вёрстке на флексы — и вам рекомендуем. Уже можно.


    Видеоверсия



    Вопросы можно задавать здесь.

    HTML Academy 78,05
    Интерактивные онлайн-курсы
    Поделиться публикацией

    Вакансии компании HTML Academy

    Комментарии 12
    • 0
      Картинки с текстом нужно делать в png, а то глаз цепляется.
      • +1

        Картинка с текстом, где есть фотография, будет весить мегабайт и ваш глаз устанет раньше, чем дождётся её.

        • 0
          637кб, если быть точным.
      • 0
        Когда уже все браузеры перейдут на единую запись для флекса (да, я знаю про autoprefix). Негодования коммент.
        • 0
          Так уже, префиксы для старых версий.
          • 0

            UC Browser, чтоб ему..:( А так да, если чисто под десктоп, префиксы уже пару лет как не нужны.


            IE11, кстати (небольшая поправочка к статье) тоже понимает без префиксов. Но с багами (за что и покрашен желтеньким на canIUse как «поддерживающий частично»).

            • 0
              Не так давно выкатили новый движок, U4. В нём уже всё нормально — работает без префиксов, проверил. И без жутких багов, которые были на U3. Правда, я не понял, будут ли они обновлять старые версии с U3 на новый движок. Новые версии сейчас выпускаются и с U3, и с U4, с одинаковой нумерацией. Но из маркета по умолчанию скачивается нормальная версия.
              • 0

                Интересно! Где можно узнать про это подробнее? На офсайте что-то вообще мало технических подробностей...


                Новые версии сейчас выпускаются и с U3, и с U4, с одинаковой нумерацией.

                Т.е. по номеру версии никак не узнать, что за движок под капотом? Оригинально-с!

        • 0
          Давно пора уже верстать сайты в стиле той ОС, которой пользуется посетитель. Браузеров и программ это тоже касается. Проблемы с дизайном будут исключены.
          • 0
            Если к примеру взять БС3 и БС4, как можно комбинировать хотя-бы сетку для тех кто поддерживает или не поддерживает полностью флексы?
            Да, о флексбагах бы статью — было бы интересно.
            А-то у меня некоторые индивидумы таблицам дают флекс, ну и внутрь просто флекса запихивают картинки которые флекс беспощадно жмёт во все стороны :)
            • 0

              В этом году работал над гос заказом новостного сайта для СМИ. Вопрос о поддержке браузеров поднял сразу — парни сказали делать по современным стандартам.
              А так уже в 2014 при разработке соц сети стал переходить на флексы т.к. на аудиторию ie 9 вообще никто не ориентировался. Если честно не знаю кто до сих пор верстает на флоатах, Сбербанк разве что.
              Гугл материал при разработке своих новых компонентов браузеры ниже ie11 не пускают.
              Сейчас актуальным стал вопрос внедрения гридов, но пока замечаю что при работе со строкой лучше справляются флексы, и гриды их не способны полностью заменить. Гриды именно для работы с сеткой, а это либо разметка основного темплейта, либо создание списка.

              • 0
                Кто-то еще использует сайты? Редуцент, скоро будут только приложения, а сайты идут в небытие, или я не прав?

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое