Flexbox – это новый мощный инструмент веб-разработчиков для создания макетов, который делает многие сложные задачи, такие как, например, адаптивная вёрстка CSS, довольно тривиальными. Почти все современные браузеры его поддерживают, а значит самое время взглянуть на его функционал и оценить полезность в работе.
Для наглядности мы попробуем создать блок, где будут находиться адаптивные комментарии для сайта при помощи flexbox. Мы рассмотрим некоторые интересные свойства данного инструмента в режиме макета и научимся использовать их в полной мере.
Что мы будем использовать?
Flexbox содержит некоторые свойства CSS, которые нам сегодня пригодятся:
display: flex - активирует режим адаптивной вёрстки, что позволяет дочерним элементам следовать одним правилам;
justify-content - это свойство определяет главный элемент, по которому будут равняться дочерние элементы. (похоже на св-во text-align, подробнее здесь);
order - flexbox даёт нам полный контроль над точным местоположением элемента. Мы будем использовать этот инструмент в нашей секции с комментариями, чтобы работать с расположением текста и фотографий (больше вы найдёте здесь);
flex-wrap - отвечает за оболочку «гибкого» элемента. Мы будем использовать его для того, чтобы образовать так называемое облако, связанное с аватаркой пользователя для удобства чтения на небольших экранах (flex-wrap on MDN).
Верстка комментариев
Мы хотим, чтобы наш раздел комментариев отвечал следующим требованиям:
- Каждый комментарий должен содержать аватар, имя, время и, собственно, сам комментарий;
- Должно быть два типа комментариев – авторский (окрашенный в голубой и имеющий аватар справа) и комментарии всех остальных;
- HTML для обоих типов должен быть максимально схож, чтобы можно было легко генерировать комментарии с помощью кода;
- Всё должно быть полностью адаптивным.
Всё это может быть легко реализовано при помощи нескольких строк CSS с flexbox. Теперь перейдём к коду!
HTML код
У нас будет иметься список комментариев с базовой формой для заполнения в конце.
<ul class="comment-section">
<li class="comment user-comment">
<div class="info">
<a href="#">Anie Silverston</a>
<span>4 hours ago</span>
</div>
<a class="avatar" href="#">
<img src="images/avatar_user_1.jpg" width="35" alt="Profile Avatar" title="Anie Silverston" />
</a>
<p>Suspendisse gravida sem?</p>
</li>
<li class="comment author-comment">
<div class="info">
<a href="#">Jack Smith</a>
<span>3 hours ago</span>
</div>
<a class="avatar" href="#">
<img src="images/avatar_author.jpg" width="35" alt="Profile Avatar" title="Jack Smith" />
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida sem sit amet molestie portitor.</p>
</li>
<!-- Больше комментариев -->
<li class="write-new">
<form action="#" method="post">
<textarea placeholder="Write your comment here" name="comment"></textarea>
<div>
<img src="images/avatar_user_2.jpg" width="35" alt="Profile of Bradley Jones" title="Bradley Jones" />
<button type="submit">Submit</button>
</div>
</form>
</li>
</ul>
Если присмотреться к коду, единственное различие между кодом для автора и пользователей заключается в разности классов. Все стилистические и макетные отличия будут реализованы в CSS с помощью всего двух классов - .user-comment и .author-comment.
CSS код
Здесь мы поработаем со связанными с flexbox техниками, которые мы использовали ранее для разработки макета. Если вы хотите разобраться в коде более подробно, то просто скачайте весь файл стилей, нажав на соответствующую кнопку в нижней части статьи.
Во-первых, мы присвоим всем комментариям display: flex, это свойство необходимо для использования элементов flexbox, что позволит сверстать нам адаптивные комментарии для сайта, т.к. все дочерние элементы будут наследовать свойства «главного».
.comment{
display: flex;
}
Эти «гибкие» контейнеры охватывают всю ширину экрана с комментариями и содержат в себе информацию о пользователе, аватар и сообщение. Поскольку мы хотим, чтобы комментарии, оставленные автором, находились справа, мы можем воспользоваться некоторыми свойствами, которые предоставляет адаптивная вёрстка CSS и flexbox.
.comment.author-comment{
justify-content: flex-end;
}
Это сделает комментарии, похожими на следующее:
Теперь у нас есть комментарий автора, выровненный справа, но нам ещё нужно поставить элементы контейнера в обратном порядке, чтобы первым появлялось сообщение, затем аватар, а информация находилась чуть дальше справа. Для этого мы воспользуемся свойством order.
.comment.author-comment .info{
order: 3;
}
.comment.author-comment .avatar{
order: 2;
}
.comment.author-comment p{
order: 1;
}
Как видите, с помощью flexbox сделать всё это не составило труда.
Наш раздел комментариев стал выглядеть именно так, как мы и задумывали. Единственное, что осталось – это позаботиться о его облике на небольших дисплеях, ведь там нет столько свободного места, поэтому придётся устроить кое-какие перестановки в макете и сделать всё более адаптированным.
Мы настроим медиа-запрос таким образом, чтобы абзацы комментариев занимали всю ширину контейнера. Это приведёт к тому, что аватар и информация о пользователе перейдут на следующий абзац из-за ранее заданных свойства flex-wrap, которое имеет значение wrap.
@media (max-width: 800px){
/* Меняет порядок элементов в блоке с комментариями пользователей так, что сначала идём сам комментарий, а затем аватар и информация */
.comment.user-comment .info{
order: 3;
}
.comment.user-comment .avatar{
order: 2;
}
.comment.user-comment p{
order: 1;
}
/* Заставляет комментарий занять всю ширину блока, смещая при этом аватар и информацию вниз */
.comment p{
width: 100%;
}
/* Выравнивает влево и к самому началу контейнера все элементы авторского комментария */
.comment.author-comment{
justify-content: flex-start;
}
}
Можно заметить разницу между этим скриншотом и тем, что выше. Вы также можете открыть демо-версию в браузере и оценить адаптивность, изменяя размер окна.
Заключение
Здесь мы подведём итоги нашей работы. Будет круто, если всё это дало вам представление о реальном применении flexbox при вёрстке макетов. Если вам стало интересно, то можете углубиться, воспользовавшись следующими ресурсами:
Приёмы CSS для flexobx - здесь;
Статься, подробно разбирающая MDN - здесь;
Сайт, представляющий лёгкие flexbox решения для классических проблем CSS - здесь.