FlexBox верстка блока с комментариями

Немного теории

Перед тем как начать знакомиться с примерами из статьи, хотелось бы сделать небольшое теоретическое отступление. Итак, во FlexBox верстке участвую 2 типа элементов: контейнер и элементы, входящие в него и являющиеся его потомками.

Внутри контейнера существуют 2 оси: основная (main axis) и кросс-ось (cross axis), которая расположена перпендикулярно основной оси.

Элементы внутри контейнера выстраиваются, как правило, сначала по основной оси, а уже потом по кросс-оси.

Какие правила CSS мы собираемся использовать

CSS-правила из спецификации по FlexBox также можно разделить на 2 группы: одни применяются к flex-контейнеру (гибкому контейнеру), другие - к flex-элементам (гибким элементам).

Итак, давайте рассмотрим некоторые CSS-свойства, используемые при создании FlexBox верстки:

• display: flex — применяется к контейнеру. Активирует flex режим и заставляет элементы, находящиеся внутри контейнера следовать правилам FlexBox. Варианты значений: flex | inline-flex.
• justify-content — это свойство применяется к контейнеру. Оно определяет по какой стороне будут выравнены элементы (варианты значений: flex-start | flex-end | center | space-between | space-around. Работает аналогично CSS-свойству text-align). Подробности о свойстве justify-content;
• order — применяется к элементам, находящимся внутри контейнера. order позволяет контролировать порядок расположения элементов внутри контейнера (по-умолчанию они отображаются в таком же порядке, как расположены в коде страницы). Мы будем использовать это мощный инструмент в нашем блоке с комментариями для размещения рядом текста и изображений. Подробности о свойстве order;
• flex-wrap — правило применяется к контейнеру (варианты значений: nowrap | wrap | wrap-reverse). По-умолчанию, элементы в контейнере выстраиваются по одной линии. С помощью правила flex-wrap вы можете изменить поведение элементов в контейнере, позволив им перестраиваться ниже, образуя еще одну линию. Значения правила учитывают направление элементов. Подробности о правиле flex-wrap;

Макет

Необходимо, чтобы блок с комментариями, который мы верстаем, соответствовал определенным требованиям:

• Каждый комментарий должен состоять из: аватара и имени комментатора, времени добавления и текста комментария;
• В блоке с комментариями должно быть 2 вида комментариев: первый — написанный автором (окрашен в бледно-зеленый цвет и расположен справа), второй вид: все остальные, написанные посетителями;
• Структура HTML-разметки обоих видов комментариев должна быть по возможности похожей;
• Верстка должна быть адаптивной;

Используя FlexBox, все это можно реализовать с помощью нескольких строк CSS-кода.

Итак, давайте перейдем к делу!

HTML

Структура HTML-кода довольно проста. Она включает в себя простой список комментариев и форму для добавления новых комментариев, расположенную под списком.

HTML

<ul class="comment-section">
		<li class="comment user-comment">
			<div class="info">
				<a href="#">Анна Серебрякова</a>
				<span>4 часа назад</span>
			</div>
			<a class="avatar" href="#">
				<img src="/img/au1.jpg" width="35" alt="Profile Avatar" title="Анна Серебрякова" />
			</a>
			<p>Suspendisse gravida sem?</p>
		</li>

		<li class="comment author-comment">
			<div class="info">
				<a href="#">Евгений Смирнов</a>
				<span>3 hours ago</span>
			</div>
			<a class="avatar" href="#">
				<img src="/img/aa.jpg" width="35" alt="Profile Avatar" title="Евгений Смирнов" />
			</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="Ваш комментарий" name="comment"></textarea>
				<div>
					<img src="/img/au2.jpg" width="35" alt="Profile of Bradley Jones" title="Борис Иванов" />
					<button type="submit">Отправить</button>
				</div>
			</form>

		</li>
	</ul>

Если рассмотреть приведенный выше код повнимательней, можно заметить, что за структура элементов в комментарии автора и комментарии простого пользователя одинаковая. Отличаются только CSS-классы: блоку с комментариями автора присвоен класс .author-comment, а блок с комментарием обычного посетителя имеет класс .user-comment

CSS

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

Сначала, нужно присвоить элементу, в котором хранится комментарий, CSS-правило display: flex;. После этого мы сможем применять FlexBox CSS к комментариям и их потомкам.

CSS

.comment{display: flex;} 

Этот элемент (в нашем случае, <li>) является гибким контейнером. Он растягивается на всю ширину секции с комментариями и хранит в себе блоки с аватаркой комментатора, датой добавления комментария и текстом комментария. Так как мы хотим, чтобы комментарии, написанные автором, были выровнены по правому краю, нам нужно использовать следующие FlexBox свойства.

CSS

.comment.author-comment{justify-content: flex-end;} 

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

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

CSS

	.comment.author-comment .info{order: 3;} 
	.comment.author-comment .avatar{order: 2;} 
	.comment.author-comment p{order: 1;} 

Как вы можете видеть, с помощью FlexBox, процесс верстки становится легче.

Теперь блок с комментариями выглядит так, как мы хотели. Осталось только убедиться, что он также хорошо выглядит на экранах мобильных устройств. Так как экраны мобильных устройств довольно узкие, мы должны сделать некоторые изменения в CSS коде, чтобы наш контент был доступен посетителям, владеющим мобильными устройствами.

Мы будем использовать media-запросы (media-queries) для того чтобы растянуть блоки с комментариями на всю ширину экрана мобильного устройства. Также необходимо передвинуть аватарку и информацию о комментаторе под блок с текстом комментария. Для этого используя правило flex-wrap со значением wrap.

CSS

@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 верстке и вдохновит вас на использование это подхода в ваших реальных проектах.

Если вам интересно получить дополнительную информацию о FlexBox, предлагаем вам несколько ресурсы, которые могут быть вам полезны:

• Список CSS-трюков, связанных с FlexBox
• Углубленная статья на MDN
• Простое решение классических CSS-задач с помощью FlexBox

При написании статьи использовались следующие ресурсы:

• http://tutorialzine.com/2015/11/using-flexbox-to-create-a-responsive-comment-section/
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Демо-страница

Скачать архив с кодом из статьи