Балансировка текста и изображений с помощью Flexbox

Балансировка текста и изображений с помощью Flexbox

От автора: в конце семестра студенты сдают мне свои работы. В этих демо зачастую можно встретить очень длинный текст сбоку или под изображениями, или же наоборот, слишком большие изображения с небольшим отрывком текста. В работу дизайнера входит балансировка текста и изображений, чтобы все смотрелось гармонично: что-то одно не должно заглушать страницу за счет другого. Это крайне важно в выносках (небольшие отрывки текста с изображением), которые должны быть жидкими и уметь адаптироваться к изменению размера экрана и непредсказуемому изменению количества контента. После недолгих экспериментов я нашел идеальное решение, удовлетворяющее обоим условиям. Для этого нам понадобится flexbox и фоновые изображения.

Создание модулей

В базовую разметку входит тег figure с двумя тегами div внутри. Например, в демо выше эти теги находятся внутри элемента с классом column. Один из модулей показан ниже:

Стили тега figure:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Первый div в модуле изначально пустой, мы «заполним» его фоновым изображением:

Первый div имеет визуальный вес, равный 1. Второй div имеет значение 2, он будет в два раза шире первого по умолчанию:

Стили текста внутри тега figure:

У последнего параграфа в div убран margin-bottom, чтобы он не входил в высоту блока:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фоновые изображения в модулях задаются через псевдоклассы :first-of-type или nth-of-type:

Эффект

Стили выше делают так, чтобы фотографии всегда заполняли левую часть модуля сверху донизу, сжимаясь и расширяясь в зависимости от изменения ширины адаптивного контейнера и количества контента. Можете поэкспериментировать, добавьте или удалите текст в модуле в CodePen демо.

Также можно перевернуть макет каждого модуля следующим образом:

Ограничения

Если сильно сжать окно браузера, изображения станут слишком высокими. В таком случае помимо изменений на стандартных брейкпоинтах (уменьшение margin, line-height, font-size, padding и т.д.) есть еще два варианта:

1. Изменить баланс изображений и текста, приравняв визуальный вес обоих дочерних элементов в модуле:

2. Перестроить модули в вертикальный макет:

Слишком большой, слишком маленький

Данный подход предполагает, что в каждом блоке выноски будет хотя бы чуть-чуть текста, но и не слишком много. По-настоящему продуманная система будет проверять оба случая: можно было бы использовать JS (или в будущем запросы элементов) для проверки соотношения сторон каждого блока, переключая flex-direction, если высота блока намного больше его ширины.

В принципе, свойство object-fit должно работать точно так же с обычными изображениями, расположенными рядом с текстом, однако в моих экспериментах с этим возникли проблемы. Также будет полезно почитать спецификацию CSS Grid. В дальнейших экспериментах я буду использовать оба подхода.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree