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

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

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

.container {
  width: 800px;
}

.section {
  display: flex;
}

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

See the Pen css_adaptive_percent_1 by Hexlet (@hexlet) on CodePen.

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

See the Pen css_adaptive_flex_1 by Hexlet (@hexlet) on CodePen.

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

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

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

See the Pen css_adaptive_flex_2 by Hexlet (@hexlet) on 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 пикселей по ширине

See the Pen css_adaptive_flex_3 by Hexlet (@hexlet) on CodePen.

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

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

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

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Вебинар «Как самостоятельно учиться»