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

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

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

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

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

<div class="column">
 <figure class="flex">
 <div></div>
 <div>
 <h3>Aloe polyphylla Schönland ex Pillans</h3>
 <p>Endangered native of the Maluti Mountains…</p>
 </div>
 </figure>

</div>

Стили тега figure:

.flex {
  margin: 0;
  display: flex;
  border: 5px solid #333;
  margin-bottom: 2rem;
}

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

.flex div:first-child {
  flex: 1;
  background-size: cover;
  background-position: center;
}

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

.flex div:last-child {
  margin: 2rem;
  flex: 2;
}

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

.flex h3 {
  font-size: 1.5rem;
  margin-top: 0;
  font-weight: 400;
}
.flex p {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
}

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

.flex p:last-of-type {
  margin-bottom: 0;
}

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

.flex:first-of-type div:first-child {
  background-image: url("aloe-polyphylla.jpg");
}

Эффект

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

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

.flex:nth-child(odd) {
  flex-direction: row-reverse;
}

Ограничения

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

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

@media all and (max-width: 600px) {
  .flex div { flex: 1 !important; }
}

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

@media all and (max-width: 400px) {
  .flex { flex-direction: column; } 
  .flex div:first-child { min-height: 200px; }
}

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

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

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

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

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree