Медіа-об'єкт — це загальний термін, що використовується для компонента інтерфейсу користувача, де з одного боку є зображення, а з іншого текст. Зображення може бути ліворуч або праворуч від тексту — це не має значення. Зазвичай текст не обтікає зображення — він залишається на своєму боці, а зображення на своєму.
Насправді, не обов'язково має бути зображення з текстом. Це може бути комбінація відео з текстом, комбінація зображення з формою або навіть комбінація зображення із зображенням та ін.
Це основна концепція, але, як правило, медіа-об'єкти мають бути досить гнучкими. Вони повинні розширюватися і стискатися, щоб їх вміст відповідав їхньому оточенню. Крім того, вони повинні підходити вмісту всіх розмірів, без спотворення пропорцій.
Отже, давайте подивимося, як ми можемо використовувати флексбокси для створення медіа-об'єктів.
<!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 для забезпечення міцного synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative думати про те, що надмірне значення дії.</p>
</div>
</div> 
Базова розмітка, яку ми використовували, виглядає приблизно так.
<code data-language="html"><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 для забезпечення міцного synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative думати про те, що надмірне значення дії.</p>
</div>
</div> 
От фрагмент, де ми змінюємо порядок.
<code data-language="css">.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 для забезпечення міцного synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative думати про те, що надмірне значення дії.</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 для забезпечення міцного synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative думати про те, що надмірне значення дії.</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 для забезпечення міцного synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative думати про те, що надмірне значення дії.</p></div></div>
