Популярно, доступно, полезно

Сила Flex Grow


Описание проблемы

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

макет для flex grow

Варианты решения

Здесь у нас есть одно и то же окно, и мы хотим, чтобы кнопки были равномерно распределены по части страницы. Это может быть панель навигации или какой-либо другой блок с контентом. Простой способ сделать это — определить ширину в пикселах для каждой кнопки, как в первом примере. Если мы знаем желаемую ширину страницы, то можем просто отмерить каждой нужное количество пикселей.

Второй вариант, как в примере № 2 — с процентами. Если бы у нас было 3 кнопки, которые нужно растянуть на всю ширину экрана, которому было установлено значение 100vw(Viewport Width), можно было бы установить width каждой кнопке примерно 33%, чтобы достичь этого. Это также будет работать, если у контейнера или окна значение width было бы в пикселях.

Третьим вариантом будет добавление flex-basis и flex grow. Если наши размеры равны 100px или какие либо другие, мы можем добавить flex-basis. Это свойство похоже на минимальную ширину(min-width). Это говорит о том, что 100px — это базовая ширина для нашего контента. Но с flexbox эта ширина будет меняться в зависимости от того, какой контент будет добавлен или убран. Flex-basis и flex grow определяется тем, какое дополнительное пространство доступно в контейнере с компонентами. Если есть три кнопки с шириной 100px и flex-basis, равным 0, мы могли бы установить flex grow значение 1,5. Это означает, что если какая-либо из трех кнопок будет удалена, две оставшиеся изменят свое значение width с учетом дополнительного пространства, но при этом используя 100px в качестве основы для нового значения. Давайте посмотрим, как это содержимое может измениться, если мы добавим или уберем контент.

макет с использованием flex grow

Здесь мы убираем одну из кнопок в каждом примере. Элементы, определяемые пикселями или процентами, останутся неизменными. В зависимости от наших настроек выравнивания содержимое может перемещаться в середину экрана, и объекты с процентной шириной могут меняться, если контейнер, в котором они находятся, определяется шириной окна просмотра(Viewport).

В третьем примере, когда мы удаляем элемент, другие два будут изменяться в зависимости от flex grow с значением 1.5. Если бы наш flex grow был установлен в значение 0, объекты вели бы себя точно так же, как и в первом примере, и остались бы 100px в ширину. Мы могли бы также изменить flex grow каждого компонента по отдельности. Если наш первый элемент был бы с flex grow 1.2, а второй с значением 1.7, то при удалении третьего объекта, второй стал бы больше первого, так как он займет больше оставшегося пространства на экране. Давайте посмотрим, что произойдет, если элемент будет добавлен:

макет без flex grow

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

Дополнительный пример

Небольшое предостережение, хотя это и выглядит здорово, представьте что мы добавили 5 дополнительных компонентов. В этот момент нам либо понадобится обертка для новой строки, либо альтернативное решение, так как кнопки шириной 2 пикселя не слишком эстетично выглядят.

Пример, иллюстрирующий данную ситуацию :

See the Pen BOQVgw by filin_from_2042 (@filin_from_2042) on CodePen.

В меню навигации вверху функция flex grow не активируется на самом элементе, а скорее при наведении в CSS. Каждому объекту присваивается минимальная ширина, и контейнеру установлен режим отображения flex с flex-flow: row wrap , так что компоненты переносятся, если окно уменьшается.

новый макет с flex grow
колонки с flex grow

Этот же эффект может быть достигнут с помощью чего-то вроде свойства css transform: scale. Однако большая разница здесь в том, что при событии mouseover размер активной кнопки увеличивается, но размер всех остальных кнопок уменьшается одновременно, поэтому общее количество занимаемого пространства одинаково.

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

полный пример макета flex grow

По щелчку содержимое добавляется под элементом. Новый объект имеет гораздо большее значение flex grow, которое составляет около 2.5, чем у всех остальных. Новое содержимое по-прежнему находится в том же контейнере, поэтому каждый из дополнительных элементов масштабируется чтобы поместиться в контейнер. При этом, новый контент занимает больше места.

Перевод статьи «The Power of Flex-Grow»

Добавить комментарий

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