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

CSS: Основы Flex 52 сообщения
Обновлено: 28 апр., 23:20
662
Студента
75%
Завершения

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

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

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

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

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

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

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

Задание

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

Подсказки

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

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

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

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

Впечатления

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

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


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

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


Аватар пользователя Анастасия Батарей
Анастасия Батарей 08 сентября 2020

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