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

Обновлено: 08 мая, 23:20
1274
Студента
78%
Завершения

Данное испытание потребует от вас навыков поиска решения методом проб и ошибок.

Иногда, для создания адаптивной вёрстки можно прибегать к хитростям, не лежащим на поверхности. Ваша задача — адаптировать для больших разрешений представленную страницу.

Страница без адаптива

Страница состоит из двух частей:

  • Меню
  • Основной контент

Сейчас, на всех разрешениях экрана меню располагается сверху, а под ним находится контентная часть. Ваша задача — при ширине viewport от 1040px расположить меню сбоку от контентной части не «сломав» отображение на мобильных устройствах.

Финальный вид испытания

Задание

  1. Допишите стили в класс .flexible-aside.
  2. Допишите стили в класс .main
  • Ширина бокового меню: 300px. При ширине viewport меньше 1040 пикселей: на всю доступную ширину.
  • Базовая ширина контентной части без учёта отступов: 700px. Блок должен тянуться на всю доступную ширину при любом разрешении viewport

Подсказки

  • Посмотреть финальные результаты на трёх разных разрешениях можно в директории __tests_/_image_snapshots__
  • Перед началом задания обязательно посмотрите на поведение блоков.

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

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

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

Отзывы

Аватар пользователя Тимофей Ч.
Тимофей Ч. 26 октября 2022

Блин, прикольное задание! Посидел минут 20 в панике и с пустой головой, потом подумал "Окей, контент растягивается, меню растягивается (иногда), значит их flex-grow не может быть равен 0. Но тогда ведь невозможен кейс, чтобы меню было фиксированной ширины! Или......" Дальше всё решилось мгновенно)


Аватар пользователя Maxim Dzyubak
Maxim Dzyubak 20 января 2023

Крутое задание) Первое что пришло в голову — это использовать медиа запросы. Но потом сразу понял, что надо с помощью флекса) Моё решение отличается от учительского. Интересно критична разница и правильно ли так решить?) https://ru.hexlet.io/code_reviews/876091


Аватар пользователя Tatarin Frontend
Tatarin Frontend 25 августа 2022

Кажется, я немного считерил)

https://ru.hexlet.io/code_reviews/691072

Но вообще спасибо! Даже меня с 4-х летним оптом удивили такой задачей. Первые минут 10 мозг орал: медиазапросы!!!!


Аватар пользователя Yaroslav Bashmakov
Yaroslav Bashmakov 09 марта 2021

Классное задание! Сначала решил по какому-то наитию, затем стал вдумчиво формализовывать, что происходит и по какому принципу выстраивается макет.


Аватар пользователя Art Hexlet
Art Hexlet 09 января 2021

Неожиданный поворот. Когда я попробовал, то, что сработало и тест был зачтен, для меня это, показалось все же неверным и я еще какое-то время пытался себя убедить, что есть другое решение, так как думал, что правильная верстка выглядит иначе и однозначнее ) Но в целом рад, что результат оказалось верным, спасибо )