Как сверстать список участников встречи с помощью Flexbox
Эта статья основана на одном из практических заданий verstaem.online.
Вы можете читать материал как обычное руководство или сначала попробовать выполнить задание самостоятельно, а затем сравнить свое решение с подробным разбором.
Перейти к заданиюВ этой статье мы создадим список участников встречи с помощью Flexbox. На его примере разберем, как расположить элементы в строку, автоматически переносить их на новую строку и оформить компактные карточки с аватаром и именем.
Создаем HTML-разметку
Сначала создадим базовую HTML-разметку с помощью Emmet. Для этого достаточно ввести ! и нажать Tab. Обратите внимание на атрибут lang. Поскольку основной контент страницы написан на русском языке, здесь используем значение ru.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Участники встречи</title>
</head>
<body>
</body>
</html>Теперь перейдем к блоку. Здесь у нас идут подряд одинаковые блоки, а значит идеально будет использовать список — <ul>. Это даст разметке смысла, и позволит скринридерам прочитать количество элементов. Сами карточки сделаем через <div>, а внутри разместим два элемента — изображение и текст. Напомню, что атрибут alt у изображения обязателен, причем не пустой, а заполненный по смыслу.
<ul class="participants">
<li class="participants__item">
<div class="participants__card">
<img src="img/1.png" alt="Антон Смирнов" class="participants__avatar">
<div class="participants__name">Антон Смирнов</div>
</div>
</li>
<li class="participants__item">
<div class="participants__card">
<img src="img/2.png" alt="Алена" class="participants__avatar">
<div class="participants__name">Алена</div>
</div>
</li>
<li class="participants__item">
<div class="participants__card">
<img src="img/3.png" alt="Екатерина Белова" class="participants__avatar">
<div class="participants__name">Екатерина Белова</div>
</div>
</li>
<li class="participants__item">
<div class="participants__card">
<img src="img/4.png" alt="Мария" class="participants__avatar">
<div class="participants__name">Мария</div>
</div>
</li>
<li class="participants__item">
<div class="participants__card">
<img src="img/5.png" alt="Алексей Иванов" class="participants__avatar">
<div class="participants__name">Алексей Иванов</div>
</div>
</li>
</ul>Добавляем стили
Подключим файл стилей через <link> и зададим несколько базовых правил. Для этого задания достаточно переопределить box-sizing, сбросить отступ у <body> и подключить шрифт Inter, который используется в макете.
* {
box-sizing: border-box;
}
@font-face {
font-family: "Inter";
src: url("../fonts/InterMedium.woff2");
font-display: swap;
font-weight: 500;
}
body {
margin: 0;
font-family: "Inter", sans-serif;
}Далее зададим стили списку. Отступы, flexbox, максимальную ширину и т. д.
.participants {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0 auto;
padding: 24px;
max-width: 640px;
list-style: none;
}Здесь важным нюансом является наличие flex-wrap: wrap, потому что по умолчанию flex-контейнер не дает возможности переносить элементы на новую строку, и они пытаются ужаться в контейнер. Но задав это свойство, мы явно говорим «переноси, если не помещается».
Задаем стили карточке. Здесь ничего сложного, важно только добавить flexbox, и align-items: center, чтобы элементы встали по центру вертикальной оси.
.participants__card {
display: flex;
align-items: center;
border: 1px solid #e5e7eb;
border-radius: 100px;
padding: 10px 16px 10px 12px;
gap: 12px;
}Далее задаем стили внутренностям. Тексту задаем все то, что в макете, а изображению обязательно прописываем ряд важных свойств — размеры, display, border-radius и object-fit: cover. Такой набор свойств поможет сделать изображение универсальным, и вы сможете подставлять туда любое изображение — оно не сломается.
.participants__avatar {
display: block;
border-radius: 100%;
width: 32px;
height: 32px;
object-fit: cover;
}
.participants__name {
font-weight: 500;
font-size: 16px;
color: #111827;
}Теперь вы умеете создавать список участников с помощью Flexbox, переносить элементы на новую строку и оформлять компактные карточки с аватаром и именем. Попробуйте изменить количество участников, добавить длинные имена или сделать карточки разной ширины, чтобы лучше понять, как работает Flexbox в подобных интерфейсах.