falbar Создание адаптивного раздела комментариев с помощью flexbox

Создание адаптивного раздела комментариев с помощью flexbox

24 июня 2018 Перевод 583 0

Flexbox – это новый мощный инструмент веб-разработчиков для создания макетов, который делает многие сложные задачи, такие как, например, адаптивная вёрстка CSS, довольно тривиальными. Почти все современные браузеры его поддерживают, а значит самое время взглянуть на его функционал и оценить полезность в работе.

Реклама

Для наглядности мы попробуем создать блок, где будут находиться адаптивные комментарии для сайта при помощи flexbox. Мы рассмотрим некоторые интересные свойства данного инструмента в режиме макета и научимся использовать их в полной мере.

Что мы будем использовать?

Flexbox содержит некоторые свойства CSS, которые нам сегодня пригодятся:

  • display: flex - активирует режим адаптивной вёрстки, что позволяет дочерним элементам следовать одним правилам;
  • justify-content - это свойство определяет главный элемент, по которому будут равняться дочерние элементы. (похоже на св-во text-align, подробнее здесь);
  • order - flexbox даёт нам полный контроль над точным местоположением элемента. Мы будем использовать этот инструмент в нашей секции с комментариями, чтобы работать с расположением текста и фотографий (больше вы найдёте здесь);
  • flex-wrap - отвечает за оболочку «гибкого» элемента. Мы будем использовать его для того, чтобы образовать так называемое облако, связанное с аватаркой пользователя для удобства чтения на небольших экранах (flex-wrap on MDN).

Верстка комментариев

Мы хотим, чтобы наш раздел комментариев отвечал следующим требованиям:

  • Каждый комментарий должен содержать аватар, имя, время и, собственно, сам комментарий;
  • Должно быть два типа комментариев – авторский (окрашенный в голубой и имеющий аватар справа) и комментарии всех остальных;
  • HTML для обоих типов должен быть максимально схож, чтобы можно было легко генерировать комментарии с помощью кода;
  • Всё должно быть полностью адаптивным.
comment-section-layout

Всё это может быть легко реализовано при помощи нескольких строк 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;
}

Это сделает комментарии, похожими на следующее:

justify-content-flex-end

Теперь у нас есть комментарий автора, выровненный справа, но нам ещё нужно поставить элементы контейнера в обратном порядке, чтобы первым появлялось сообщение, затем аватар, а информация находилась чуть дальше справа. Для этого мы воспользуемся свойством order.

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

Как видите, с помощью flexbox сделать всё это не составило труда.

reordering-elements

Наш раздел комментариев стал выглядеть именно так, как мы и задумывали. Единственное, что осталось – это позаботиться о его облике на небольших дисплеях, ведь там нет столько свободного места, поэтому придётся устроить кое-какие перестановки в макете и сделать всё более адаптированным.

Мы настроим медиа-запрос таким образом, чтобы абзацы комментариев занимали всю ширину контейнера. Это приведёт к тому, что аватар и информация о пользователе перейдут на следующий абзац из-за ранее заданных свойства 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;
    }
}

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

our-comment-section-on-smaller-screens

Заключение

Здесь мы подведём итоги нашей работы. Будет круто, если всё это дало вам представление о реальном применении flexbox при вёрстке макетов. Если вам стало интересно, то можете углубиться, воспользовавшись следующими ресурсами:

  • Приёмы CSS для flexobx - здесь;
  • Статься, подробно разбирающая MDN - здесь;
  • Сайт, представляющий лёгкие flexbox решения для классических проблем CSS - здесь.
Реклама
Комментариев еще не оставлено
no_avatar