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 пикселей по ширине? Появится горизонтальная прокрутка. Как и говорилось ранее, это очень плохое поведение, которое не очевидно для пользователя, а значит он может упустить важную информацию на нашей странице.

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

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

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

Отличный результат! Теперь блок, который в прошлый раз был скрыт, переместился на вторую строку. В некоторых ситуациях одного правила 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 пикселей по ширине.

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

• flex-wrap
• flex

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

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

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

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