Медиа-объект — это общий термин, используемый для компонента пользовательского интерфейса, где с одной стороны есть изображение, а с другой текст. Изображение может быть слева или справа от текста — это не имеет значения. Обычно текст не обтекает изображение — он остаётся на своей стороне, а изображение на своей.
На самом деле, не обязательно должно быть изображение с текстом. Это может быть комбинация видео с текстом, комбинация изображения с формой или даже комбинация изображения с изображением и др.
Это основная концепция, но, как правило, медиа-объекты должны быть достаточно гибкими. Они должны расширяться и сжиматься, чтобы их содержимое соответствовало их окружению. Кроме того, они должны подходить содержимому всех размеров, без искажения пропорций.
Итак, давайте посмотрим, как мы можем использовать флексбоксы для создания медиа-объектов.
<!doctype html>
<title>Пример</title>
<style>
.media {
display: flex;
align-items: flex-start;
background: #F6F3EB;
padding: 1em;
border-radius: 3px;
max-width: 24em;
}
.media-object {
margin-right: 1em;
}
.media-body {
flex: 1;
}
.media-heading {
margin: 0 0 .5em;
}
</style>
<div class="media">
<img class="media-object" src="/example/image/8s.jpg" alt="Sample photo">
<div class="media-body">
<h3 class="media-heading">Organically Synthesized</h3>
<p>Leverage agile frameworks to provide a robust synopsis for high level
overviews. Iterative approaches to corporate strategy foster
collaborative thinking to further the overall value proposition.</p>
</div>
</div>
Базовая разметка, которую мы использовали, выглядит примерно так.
<div class="media">
<img class="media-object">
<div class="media-body">
<h3 class="media-heading">...</h3>
<p>...</p>
</div>
</div>
Итак, мы добавили несколько классов к разметке и теперь можем стилизовать эти элементы по мере необходимости.
Мы устанавливаем flex: 1 для класса media-body, чтобы он рос и занимал оставшееся пространство. Мы не делаем этого для media-object, поскольку хотим, чтобы он соответствовал своему содержимому, и не более. Но мы устанавливаем margin-right, чтобы текст не приближался слишком близко к изображению.
Обратите внимание, что мы используем align-items: flex-start для флекс-контейнера (media). Это выравнивает все флекс-элементы в начале поперечной оси. В общем, они выровнены по верху нашего флекс-контейнера. Начальным значением свойства align-items является stretch, поэтому, если бы мы не установили значение, то изображение растянулось бы, чтобы соответствовать высоте текста.
Изображение справа
Мы можем перевернуть всё так, чтобы изображение было справа, а текст слева. Это делается настройкой порядка флекс-элементов.
<!doctype html>
<title>Пример</title>
<style>
.media {
display: flex;
align-items: flex-start;
background: #F6F3EB;
padding: 1em;
border-radius: 3px;
max-width: 24em;
}
.media-object {
margin-left: 1em;
order: 1;
}
.media-body {
flex: 1;
}
.media-heading {
margin: 0 0 .5em;
}
</style>
<div class="media">
<img class="media-object" src="/example/image/8s.jpg" alt="Sample photo">
<div class="media-body">
<h3 class="media-heading">Organically Synthesized</h3>
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews.
Iterative approaches to corporate strategy foster collaborative thinking to further
the overall value proposition.</p>
</div>
</div>
Вот фрагмент, где мы меняем порядок.
.media-object {
margin-left: 1em;
order: 1;
}
Таким образом, мы использовали свойство order. Начальное значение этого свойства равно нулю, поэтому любое положительное число помещает элемент после любых элементов, для которых это свойство не задано. Любое отрицательное число помещает элемент до других элементов. Другими словами, чем ниже число у order, тем дальше оно уходит назад.
Вместо этого мы могли бы применить order: -1 к классу media-body — это бы дало тот же эффект.
Заметьте, что мы также изменили margin-right на margin-left, когда изображение стало справа.
Вложенные медиа-объекты
Когда вы создаёте медиа-объекты, то можете вкладывать их друг в друга.
Вроде этого.
<!doctype html>
<title>Пример</title>
<style>
.media {
display: flex;
align-items: flex-start;
background: #F6F3EB;
padding: 1em;
border-radius: 3px;
max-width: 24em;
}
.media-object {
margin-right: 1em;
}
.media-body {
flex: 1;
}
.media-heading {
margin: 0 0 .5em;
}
</style>
<div class="media">
<img class="media-object" src="/example/image/8s.jpg" alt="Sample photo">
<div class="media-body">
<h3 class="media-heading">Organically Synthesized</h3>
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews.
Iterative approaches to corporate strategy foster collaborative thinking to
further the overall value proposition.</p>
<div class="media">
<img class="media-object" src="/example/image/9s.jpg" alt="Sample photo">
<div class="media-body">
<h3 class="media-heading">Eco Processing</h3>
<p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
</div>
</div>
</div>
</div>
В данном случае мы просто вставили один медиа-объект внутрь media-body другого медиа-объекта.
Медиа-объекты без изображений
Медиа-объект не обязательно должен быть изображением. Это может быть видео, элемент формы или что-то ещё. Вот пример использования спецсимволов HTML для отображения иконки.
<!doctype html>
<title>Пример</title>
<style>
.media {
display: flex;
align-items: flex-start;
background: #F6F3EB;
padding: 1em;
border-radius: 3px;
max-width: 24em;
}
.media-object {
margin-right: .4em;
font-size: 3em;
}
.media-body {
flex: 1;
}
.media-heading {
margin: 0 0 .5em;
}
</style>
<div class="media">
<div class="media-object">☎</div>
<div class="media-body">
<h3 class="media-heading">Organically Synthesized</h3>
<p>Leverage agile frameworks to provide a robust synopsis for high level
overviews. Iterative approaches to corporate strategy foster
collaborative thinking to further the overall value proposition.</p>
</div>
</div>
В данном случае мы устанавливаем размер шрифта для класса media-object, чтобы иконка отображалась подходящего размера. Соответственно также уменьшили значение margin-right.
Вот ещё один пример, но на этот раз с использованием эмодзи.
<!doctype html>
<title>Пример</title>
<style>
.media {
display: flex;
align-items: flex-start;
background: #F6F3EB;
padding: 1em;
border-radius: 3px;
max-width: 24em;
}
.media-object {
margin-right: .4em;
font-size: 4em;
}
.media-body {
flex: 1;
}
.media-heading {
margin: 0 0 .5em;
}
</style>
<div class="media">
<div class="media-object">😎</div>
<div class="media-body">
<h3 class="media-heading">Organically Synthesized</h3>
<p>Leverage agile frameworks to provide a robust synopsis for
high level overviews. Iterative approaches to corporate strategy
foster collaborative thinking to further the overall value proposition.</p>
</div>
</div>
