Наши инструменты для вертикального выравнивания в последнее время стали намного лучше. В первые годы работы в качестве дизайнера веб-сайтов я разрабатывал дизайн домашней страницы шириной 960 пикселей и выравнивал элементы по горизонтали на странице с помощью сетки из 12 столбцов. Появились запросы СМИ, которые потребовали серьезного психологического сдвига. Конечно, он решил некоторые большие проблемы, но представил новые, например, работу с выравниванием, когда элементы переносятся или иным образом перемещаются в макете.
Давайте рассмотрим только один конкретный сценарий: «полосу» с некоторыми кнопками. Есть две группы этих кнопок, каждая из которых содержится внутри
Проблема: отсутствие вертикального выравнивания. Допустим, мы хотим выровнять эти кнопки так, чтобы их края совпадали друг с другом.
Для начала мы могли бы пойти на пиксельные решения CSS с фиксированной шириной, чтобы заставить элементы правильно выстраиваться в различных точках останова, используя такие магические числа:
По мере того, как я переходил к некоторым более современным функциям CSS, необходимость указывать на конкретные размеры экрана с помощью уникального кода была удалена.
Мне нужна каждая кнопка и метка, на которые можно ответить:
Проблема с использованием медиа-запросов заключается в том, что они не принимают во внимание пространство вокруг элементов, которые выравниваются — это прекрасно продемонстрировано на этом изображении из «Священного альбатроса Flexbox» Хейдона Пикеринга:
Можем ли мы сделать это с помощью flexbox?
Ключевым преимуществом flexbox является его способность создавать элементы, которые реагируют на пространство вокруг них. Компоненты могут «сгибаться», чтобы заполнить дополнительное пространство, и сжиматься, чтобы поместиться в меньшее пространство.
В этой ситуации для свойства flex-wrap установлено значение wrap . Это означает, что как только оба элемента
Можем ли мы сделать это с помощью flexbox?
Загрузка...
