Анимированное руководство по CSS flex

Свойство CSS flex — это сокращенное свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.

Изначально свойство flex не подходит для обёртки элементов — его работа во многом схожа с работой overflow:hidden.

Первое, с чего стоит начать работу с flex, — это flex-wrap.

Flex Wrap

Добавьте свойство flex-wrap: wrap и посмотрите на поведение flex-элементов.

По умолчанию оно должно растягивать контейнер по высоте и спускать элементы вниз.

Примечание Высота не указана (auto/unset), но контейнер может растягиваться.

Это частый случай, когда вам нужно поместить произвольное количество элементов неопределённого размера в видимую область контейнера/экрана.

Направление элементов можно отзеркалить свойством flex-direction: row-reverse:

Возможно, такое свойство подойдёт для чтения справа налево. Ещё можно использовать float:right для всех элементов, которые находятся на одной линии с flex-end. Это свойство отличается от row-reverse, т. к. в нём сохраняется корректный порядок элементов.

Justify Content

Свойство justify-content определяет горизонтальное положение элементов. Это свойство похоже на Flex Wrap, но в justify сохраняется первоначальный порядок элементов.

В следующем примере (justify-content: center) все элементы вне зависимости от их ширины имеют горизонтальное позиционирование по центру родительского контейнера. Это похоже на свойства position: relative; margin: auto.

Значение space-between добавляет пробелы между всеми inner-элементами, тем самым растягивая строку на всю ширину контейнера:

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

Пример выше со значением space-between не имеет отступов на угловых элементах. Пример ниже со значением space-around делает равные внешние отступы на всех элементах.

Идентичный прошлому пример с растянутым элементом middle:

Как видите, вам всё равно придётся экспериментировать с flex-элементами, чтобы достичь правильного результата именно для вашего случая. Результат, естественно, зависит и от размеров содержимого.

Align Content

Все примеры выше имели свойство justify-content. Но элементы также можно позиционировать по вертикали. Свойство justify-content (выше) и свойство align-content (ниже) похожи. Разница только в их направлении — вертикальном или горизонтальном.

Вот пример flex-элементов при вертикальном позиционировании:

У space-evenly есть несколько особенностей значения:

• Свойство выделяет достаточно высоты для корректного отображения элементов.
• Вертикальные отступы у строк одинаковы.

Конечно, высоту родительского элемента всё ещё можно менять вручную, элементы в этом случае будут адаптироваться.

На практике

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

Комбинация vertical align и justify content

В этом случае контент будет отцентрирован во всех направлениях.

Space evenly

Используя значение space-evenly сразу для align-content и justify-content, можно получить следующий результат:

В этом случае нужно стараться делать элементы одной ширины. Пример выше немного странный из-за нечётного количества элементов. Для более красивой масштабируемости количество элементов должно быть чётным.

К тому же, если количество элементов будет чётным, то масштабирование будет более чистым и чувствительным без сеток на CSS и танцев с бубном на JS.

Центрирование элементов по вертикали внутри других элементов создаёт проблемы последние десять лет. Flex может их решить. Если использовать свойство space-evenly в двух направлениях, отступы будут появляться автоматически даже при разной высоте элемента:

Если вы посмотрите на flex в целом, то заметите, что это, наверное, самое полезное сочетание flex-свойств.

Размер элементов

Убедитесь, что вы явно указываете размер элементов. Если этого не сделать, некоторые свойства увеличения во flex попросту не будут работать. Используйте min-width, max-width, и width/height соответственно. Эти свойства могут кардинально повлиять на масштабируемость вашего контента.

Примеры комбинаций свойств в одной анимации

• flex-direction: row; justify-content: [value];

• flex-direction: column; justify-content: [value];

Хотя рекомендуется использовать flex внутри CSS-сеток, это совсем не обязательно. Flex хорош и сам по себе.