Проблема Flexbox

Завершаем цикл статей о Flexbox самой неприятной частью. Несмотря на крутые возможности верстки с помощью этого инструмента, есть один кейс, с которым Flexbox справляются весьма худо. И чтобы понять суть проблемы, нужно разобрать особенность переноса элементов внутри flex-контейнера.

Напоминаю, что все примеры я складываю в личном репозитории на GitHub. Спуливайте последние изменения и заходите в папку "src/flexbox-layout-examples/flexbox-problem". Как обычно, результат работы можно посмотреть, открыв в браузере файл "index.html".

Еще раз про переносы flex-элементов

Вспоминаем свойство flex-контейнера под названием "flex-wrap". Оно позволяет задать перенос flex-элементов, если они не помещаются в контейнер. Если мы зададим свойству "flex-wrap" значение "wrap" в горизонтально направленном контейнере, элементы будут переноситься на новую строку. Но как именно они переносятся?

Откройте файл "index.html". В нем вы найдете flex-контейнер с четырьмя элементами. Затем посмотрите на код в файле "style.css". Нас интересуют Flexbox стили:

Мы создали flex-контейнер со строчным направлением ("row"), переносом на новую строку ("wrap"), задали горизонтальное выравнивание "space-around" и вертикальное "center". Откройте файл "index.html" в браузере и посмотрите на результат. Все четыре элемента стоят в ряд с примерно одинаковыми расстояниями между ними. А теперь начните уменьшать размер окна браузера до тех пор, пока последний элемент не перепрыгнет на следующую строку.

Заметили, как именно он перепрыгнул? Он встал посередине следующей строки. Все из-за выравнивания "space-around". Попробуйте поменять его на "flex-start" - и элементы будут переноситься на начало новой строки.

Однако, как не задавай выравнивание в контейнере, сам факт переноса элементов по одному на новую строку говорит о слабой стороне Flexbox. Потому что в современном вебе часто используется так называемая сетка, или сеточный макет. О нем мы поговорим в будущих статьях, запомните пока что одно: сеточный макет - двумерный, а Flexbox - одномерные.

Из-за этого приходится применять различные ухищрения, дабы на Flexbox можно было верстать в двумерном виде. Например, завернуть несколько элементов в еще один контейнер, как это сделано в файле "1.html". А если посмотреть в файл "1.css", сразу приходит понимание, почему это считается хаком. Потому что исчезает очевидность происходящего. У нас два контейнера, у каждого свои выравнивания, нужно подгонять размеры и отступы элементов на разных экранах устройств с помощью медиа запросов (в нашем примере он один, но в реальных проектах этих медиа запросов может быть до жепы). Плюс у нас может быть нечетное количество элементов - как их в таком случае объединять в другие контейнеры, чтобы верстка нормально смотрелась при изменении размеров окна браузера?

Кстати, сразу отмечу проблему медиа запросов - это подбор границы, при которой должен подключиться следующий запрос. 800 это будет пикселей, 750, где минимум, где максимум - все это приходится перебирать и проверять, что является неприятной рутиной.

С другой стороны, как я говорил в прошлых статьях, сочетание Flexbox и медиа запросов дает возможность перестраивать элементы в строке или столбце, как вам заблагорассудится. Можно при маленьких размерах устройств поменять порядок элементов (свойство "order"), можно изменить направление (flex-direction), выравнивание (как в примере "1.css") и так далее. То есть, проблема Flexbox существует только если вы пытаетесь верстать на них сеточные макеты. В одномерном пространстве Flexbox (в сочетании с медиа запросами при желании) являются самым мощным инструментом, и этого у них не отнять.

Поэтому, умные люди не стали повторять ошибки прошлого, заставляя верстальщиков и разработчиков снова применять различные хаки и трюки в верстке, как это было до появления Flexbox, и создали еще один инструмент непосредственно для верстки сеточного макета. И о нем мы поговорим в будущем.

Итого

Мы разобрали мощный инструмент в арсенале верстальщика под названием Flexbox, а также выявили его недостатки. Важный вывод, который нужно сделать - не существует универсального способа решения проблем. Flexbox помогли избавиться от хаков и костылей других способов верстки, но они сами не смогли справиться с другим типом задач - верстка сеточного макета. Поэтому нужно запомнить: каждому инструменту свой круг задач.

Но как в таком случае верстать сеточные макеты? С помощью еще одного инструмента, конечно же. О нем мы обязательно поговорим после подведения итогов года на канале и небольшого перерыва на новогодние праздники.