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

CSS: Основы Flex 40 сообщений
Обновлено: 20 окт., 23:20
443
Студента
74%
Завершения

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

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

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

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

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

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

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

Задание

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

Подсказки

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

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

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

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

Впечатления

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

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

Интересное испытание! Подход раскусила относительно быстро, но решила, что на практике такое вряд ли применимо. Даже специально несколько версий попробовала, чтобы понять какой принцип проверки. Возможно, стоит в задании уточнить, что решение предполагает использование только флексов? Тесты прошли и при использовании медиа, но оставались сомнения, насколько это соответствует теме курса.