В курсе про 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-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.
Теперь посмотрим на поведения блоков в трёх различных разрешениях:
Реализуйте у себя на компьютере пример из этого урока. Попробуйте разные значения свойства flex.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Статья «Ловушки обучения»
Вебинар «Как самостоятельно учиться»
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт