Для тестирования вёрстки мы будем использовать DevTools — там мы сможем наиболее быстрым способом переполнять html-элементы.
Открываем DevTools при помощи комбинации клавиш, которая поддерживается вашим браузером или опции «Просмотреть код».
Чтобы редактировать html-элементы, нужно выбрать нужный и нажать Edit as HTML.
Переполнение списков
Первое, на что нужно обратить внимание — это списки. Согласитесь, что структура сайта может меняться, а вместе с ней может меняться и меню.
Давайте посмотрим, как может себя вести «неправильное переполнение», например, добавим ещё пункты меню.
Наша основная цель — чтобы сетка не ломалась. Здесь же явно header не меняет свой размер. Это распространённая проблема, когда разработчик использует свойство height вместо min-height.
Давайте поправим код и посмотрим, как себя должно вести меню при «правильном переполнении», когда родительский контейнер перестраивается вместе с содержимым.
Ещё один пример переполнения: мы забываем про перенос на новую строку, когда используем флексы. В этом случае меню вылезет за пределы нашей страницы.
Переполнение текстом
Теперь давайте посмотрим, как будут вести себя при переполнении карточки товаров. Как правило, в них часто вносятся изменения, так как такой контент обновляется динамически, то есть через запросы.
Первое, что мы делаем — это проверяем, как карточка реагирует на увеличение текстового контента — заголовок или абзац. На изображении видно сразу несколько ошибок: текст вылез за пределы блока, ломается сетка и текст убегает под кнопку, а также заголовок теряет центрирование.
Кажется, что самое быстрое решение — это добавить скролл в блок, но это плохо для пользователя. Например, если человек будет пользоваться сайтом с телефона, то у него возникнут сложности в просмотре информации.
Правильное поведение карточки — это адаптация под контент. Как мы уже писали ранее, карточка должна растягиваться вместе с ним. Значит, нужно проверить высоту, а также неплохо бы добавить явное центрирование.
Теперь давайте посмотрим карточку с несколькими элементами и попробуем переполнить заголовок карточки. Помимо того, что карточка сама по себе не растягивается по контенту, ещё и ломается сетка.
При помощи DevTools мы находим виновника разрушения сетки — правый margin.
Как можно поправить? Мы добавим внутренние отступы для карточки и добавим дополнительный контейнер с флексом, чтобы раздвинуть пространство при помощи justify-content.
Но есть решение, которое нам поможет убрать дополнительную обёртку в этом случае: добавим контейнеру с заголовком flex-grow, чтобы всё свободное пространство досталось именно ему.
Тема переполнения текстом очень актуальна для кнопок, так как чаще их оформляют через ширину и высоту, а для простоты центрируют флексами.
И здесь по опыту мы уже знаем, что можем сделать параметры c минимальным значением. Но тогда мы столкнемся с другой проблемой — отсутствием внутренних отступов, при которых текст будет прилипать к краям кнопки.
Поэтому самым лучшим решением является задание размеров и внутренних отступов, чтобы у нас не ломалась сетка, и внутренний контент смотрелся аккуратно. При использовании этого подхода не забывайте про полезное свойство border-box, которое позволяет включить в расчёт внутренние отступы padding помимо ширины элемента width.
Теперь давайте поговорим про текстовые блоки. В их случае частая ошибка — это выпадение текста из блока height. Посмотрим пару примеров, как это может выглядеть на живой вёрстке.
Чтобы поправить такое поведение, нужно заменить height на min-height или же вообще отказаться от высоты и задать отступы при помощи padding. При таком подходе мы можем столкнуться с проблемой выравнивания блоков: если при однородном контенте одинаковой высоты всё смотрелось аккуратно, то при переполнении сетка поломалась.
Чтобы избежать такого неявного поведения лучше добавить ещё и выравнивание по дополнительной оси для флекс-контейнера — align-items. Идеальный вариант для адаптации переполнения будет таким:
Переполнение блоками
Теперь давайте посмотрим, как будет вести себя вёрстка, если мы добавим ещё немного блоков. Первое, что мы видим — это переполнение основного контейнера, второе — ломается сетка.
Наш контейнер с ul оформлен как флексбокс, поэтому мы можем задать ему перенос flex-wrap и сделать центрирование текста text-align.
Проверка на «недополнение»
Если с переполнением блоками всё понятно, то ситуация с недополнением не совсем очевидна. Представим себе ситуацию, когда у нас есть два контейнера с отступом между друг другом:
Если мы не будем задавать ширину для контейнеров, то столкнёмся с проблемой поломанной сетки.
Для примера мы будем использовать фиксированную ширину, но если вы планируете делать адаптивную вёрстку, то лучше перевести пиксели в проценты.
Протестируем карточку на недополнение: уменьшим контент в заголовке и уберём кнопку. В примере у нас сдвинется блок, потому что margin задан фиксировано.
Чтобы это поправить, нужно задать левому отступу значение auto, тогда оно автоматически прижмёт нужный нам блок к правому краю:
Обратимся к не совсем стандартному примеру навигации и уберём в нём пункт меню с раскрывающимся списком.
С размерами всё отлично, а вот сетка поломалась. Логичное поведение — это оставить пункт меню справа.
Для этого нам нужно использовать свойство justify-content.
Переполнение изображениями
Теперь давайте посмотрим, как ведёт себя вёрстка при наполнении картинками разных размеров. Размер изображения в макете — 800х256. Если мы вставим картинку строго нужных размеров, то всё будет органично. Но на практике не всегда удается вырезать точные размеры. Сделаем аналогичную картинку, увеличенную в 2 раза — 1600х512, и уменьшенную в 2 раза — 400х128.
Видим, что размеры у изображений совсем не такие, как нужно по макету. Решить эту проблему можно, задав атрибуты тегу img. А для адаптивной вёрстки можно сделать класс, в котором значения атрибутов будут переопределяться.
Попробуем изменить пропорции, уменьшив ширину изображения до 600 пикселей.
В таком случае добавление атрибутов width и height приведёт к тому, что картинка исказится. Чтобы этого избежать можно использовать свойство object-fit.
Рассмотрим пример, когда мы делаем декоративную картинку псевдоэлементом. Чтобы уменьшить её, изменим размер фона и самого элемента. Если мы использовали фиксированные отступы, то можем столкнуться с тем, что сломается сетка.
Чтобы исправить такое поведение, можно использовать лайфхак с позиционированием по оси — transform: translateX(-50%).
Ваша вёрстка не должна ломаться при добавлении новых элементов, увеличении текста или изменении размеров страницы.
