Flex — CSS: Адаптивность сайта

В курсе про Flex много говорилось про то, что модуль помогает разработчикам адаптировать сайты для мобильных устройств. Мы рассмотрим подходы, которые позволят быстро адаптировать сайт под использование на мобильных устройствах. Главными нашими помощниками станут два свойства, о которых шла речь в курсе про Flex — это flex и flex-wrap.

Как и в прошлом уроке, для примера возьмем три блока, которые расположены в одну строку. В отличие от урока про резиновую верстку, выставим ширину каждого блока в 266.66px. Другими словами, сделаем фиксированную ширину блоков:

.container {
  width: 800px;
}

.section {
  display: flex;
}

.section .item {
  flex: 0 0 266.66px;
}

Codepen

Что случится с такими элементами, если разрешение будет меньше 800 пикселей по ширине? Появится горизонтальная прокрутка. Это не очень очевидно для пользователя, поэтому он может упустить важную информацию на нашей странице.

Codepen

Обратите внимание, что последний блок полностью ушел за пределы видимой области. Если пользователь не заметит прокрутку, или мы случайно ее запретим, то информация из последнего блока станет недоступна для пользователя.

Такую катастрофу можно предотвратить, если воспользоваться правилом flex-wrap. Оно подскажет браузеру перенести элементы, которые не помещаются в контейнер. Добавим это правило в селектор .section и посмотрим, как станет выглядеть наш блок при ширине 500px:

.section {
  display: flex;
  flex-wrap: wrap;
}

Codepen

Отличный результат! Мы переместили на вторую строку блок, который в прошлый раз был скрыт. В некоторых ситуациях одного правила flex-wrap достаточно, чтобы flex-элементы подстраивались под разрешение экрана.

Кроме flex-wrap, нам может помочь еще и правило flex. Свойство flex объединяет в себе три свойства:

• flex-grow
• flex-shrink
• flex-basis

Чтобы блоки вели себя адаптивно и «резиново», нужно разрешить элементам сжиматься по необходимости и занимать свободное пространство, если оно доступно. Базовую ширину мы задаем через свойство flex-basis — выставим там значение 266.6px. Мы разрешаем блокам сжиматься и занимать свободное пространство, поэтому здесь flex-basis — это значение по умолчанию:

.section .item {
  flex: 1 1 266.66px;
}

Теперь посмотрим на поведения блоков в трех различных разрешениях:

• 800 пикселей по ширине
• 600 пикселей по ширине
• 400 пикселей по ширине

Codepen

Самостоятельная работа

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

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

1. Свойство flex-wrap
2. Свойство flex