Александр Ланский

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

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

37528

Свойство 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 соответственно. Эти свойства могут кардинально повлиять на масштабируемость вашего контента.

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

  1. flex-direction: row; justify-content: [value];
  2. flex-direction: column; justify-content: [value];

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

Вредные советы по CSS
tproger.ru
Следите за новыми постами по любимым темам

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

Веб-разработка
CSS
Для продолжающих
37528
Что думаете?
2 комментария
Сначала интересные
Отличные наглядные примеры!  ps Один момент, было тяжело читать текст когда они постоянно движутся, приходилось рукой закрывать)) Поэтому если была бы возможность кнопочку (пауза) нажать, чтобы всё приостановилось, было бы вообще круто!
Аватар пользователя Нурик Галиакбаров
Тут бы дополнить....
Align-items, align-content, flex 0 0 100% итд. 
За руководство спасибо