От автора: инструменты для вертикального выравнивания в последнее время стали намного лучше. В первые годы работы в качестве дизайнера веб-сайтов я разрабатывал дизайн домашней страницы шириной 960 пикселей и выравнивал элементы по горизонтали на странице с помощью сетки из 12 столбцов. Появились медиа-запросы, которые потребовали серьезного психологического сдвига. Конечно, они решили некоторые значительные проблемы, но представили новые, например, работу с выравниванием, когда элементы переносятся или иным образом перемещаются в макете.
Давайте рассмотрим только один конкретный сценарий: «панель» с некоторыми кнопками на ней. Есть две группы этих кнопок, каждая из которых содержится внутри fieldset с legend. На большом экране все хорошо:
А вот очень простой метод CSS, который реализует этот макет, а также разбивает на две «строки» в мобильной контрольной точке:
.accessibility-tools fieldset { width: 48%; float: left; margin-right: 1%;
}
/* Mobile */
@media only screen and (max-width: 480px) { .accessibility-tools fieldset { width: 100%; }
}
На маленьком экране мы получаем следующее:
В этом проблема: отсутствие вертикального выравнивания. Предположим, мы хотим выровнять эти кнопки так, чтобы их края совпадали друг с другом.
Для начала мы могли бы использовать решения CSS с фиксированной шириной на основе пикселей, чтобы заставить элементы правильно выстраиваться в различных контрольных точках, используя такие магические числа:
/* Mobile */
@media only screen and (max-width: 480px) { legend { width: 160px; } button { width: 130px; }
}
Это не сложно. Но… это не совсем гибкое решение проблемы. Помимо магических чисел (фиксированные значения в пикселях, основанные на конкретном контенте), оно также полагается на использование медиа-запросов, от которых я пытаюсь отказаться, когда это возможно.
По мере того, как я переходил к некоторым из более современных функций CSS, необходимость настраивать конкретные размеры экрана с помощью уникального кода была устранена. Мне нужно, чтобы каждая кнопка и метка реагировали на: доступное пространство, их содержимое, а также другие элементы вокруг них.
Доступное пространство
Проблема с использованием медиа-запросов заключается в том, что они не принимают во внимание пространство вокруг элементов, которые выравниваются — это прекрасно продемонстрировано на этом изображении из «Священного альбатроса Flexbox» Хейдона Пикеринга:
Я действительно хочу, чтобы второй fieldset переносился под первый только тогда, когда он больше не может аккуратно умещаться в одном ряду.
Можем ли мы сделать это с помощью flexbox?
Ключевым преимуществом flexbox является его способность создавать элементы, которые реагируют на пространство вокруг них. Компоненты могут «растягиваться», чтобы заполнить дополнительное пространство, и сжиматься, чтобы поместиться в меньшее пространство.
В этой ситуации для свойства flex-wrap установлено значение wrap. Это означает, что только когда оба элемента fieldset больше не помещаются в одну строку, они будут перенесены на вторую строку.
Свойство flex-wrap имеет три доступных значений. Значение по умолчанию — nowrap, оставлять элементы в одной строке. Значение wrap позволяет элементам переноситься на несколько строк. Затем есть wrap-reverse, что позволяет элементам переноситься, но — подождите — в обратном порядке (это странно: когда элементы переносятся, они помещаются над предыдущей строкой).
Использование flexbox позволяет макету не быть таким жестким, но значение min-width по-прежнему необходимо для устранения проблемы вертикального выравнивания. Итак: близко, но не совсем то.
Может ли сетка нам помочь?
CSS Grid — это самый первый модуль CSS, созданный специально для решения текущих проблем макета, с которыми сталкиваются веб-дизайнеры и разработчики. Это не прямая замена flexbox; скорее два модуля обычно очень хорошо работают вместе.
Как и flexbox, сетка может использоваться, чтобы каждый
