Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

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

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

.container {
  display: flex;
  width: 1000px;
}

.flex-item {
  width: 333.3px;
  padding: 20px;
  box-sizing: border-box;

  color: #FFF;
  font-size: 12px;
}

Контейнер с шириной 1000 пикселей

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

Разрешение экрана 667 пикселей

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

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

.container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
}

Разрешение экрана 667 пикселей с flex-wrap

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

Но как было сказано в начале урока, помимо использования flex-wrap, нам так же поможет и правило flex. Из прошлого курса по модулю Flex мы знаем, что свойство flex объединяет в себе три свойства:

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

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

.flex-item {
  flex: 1 1 333.3px;
  padding: 20px;
  box-sizing: border-box;

  color: #FFF;
  font-size: 12px;
}

При создании такой адаптивности нам необходимо убрать у блока .container ширину в 1000px. Теперь эта ширина задаётся с помощью элементов. Второй вариант решения — использование свойства max-width.

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

  • 1000 пикселей по ширине.
  • 667 пикселей по ширине.
  • 400 пикселей по ширине.

Разрешение экрана 1000 пикселей с flex-wrap и flex

Разрешение экрана 667 пикселей с flex-wrap и flex

Разрешение экрана 400 пикселей с flex-wrap и flex

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

Дополнительное задание

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


Аватары экспертов Хекслета

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

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

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
с нуля
Верстка с использованием последних стандартов CSS
в любое время 5 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»