Практическое руководство: реализуем горизонтальную прокрутку секции на Flexbox

В этой статье мы рассмотрим решение повседневной задачи: как создать горизонтально прокручиваемую секцию сайта? Если вкратце, ответ — Flexbox.

Давайте разберёмся с этим более детально.

Каркас

Взгляните на эту разметку. Это простой блок section с несколькими вложенными div:

<section class="card">
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
</section>

Стили

Плохой дизайн никто не любит, поэтому давайте сделаем страничку более опрятной:

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #8e44ad;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

Сперва мы явно задаём ширину и высоту корневых элементов равной 100%. Затем мы определяем цвет фона, убираем отступ у body и центрируем вложенный в него элемент.

Для наглядности применим стили к этому элементу <section class="card">:

.card {
  background-color: #fff;
  min-width: 100%;
  min-height: 200px;
}

С первым свойством всё понятно, второе указывает секции всё время занимать 100% ширины родительского элемента, а третье гарантирует, что высота секции всегда будет не менее 200px. Вот, что получилось на данном этапе:

Поместим все блоки card--content в секцию card и снова займёмся стилями. Сперва сделаем card flex-контейнером:

.card {display: flex}

Затем займёмся .card--content:

.card--content {
  background-color: #e74c3c;
  min-width: 200px;
  margin: 5px;
}

Третья строка гарантирует, что ширина каждой карточки будет не меньше 200px, всё остальное просто и понятно. Вот результат:

Как вы могли заметить, прокручивается вся страница. Так происходит, потому что в секцию card помещаются не все элементы.

Исправим это так:

.card {
  overflow-x: auto;
}

И теперь прокручивается только секция:

Неплохо!

Прячем полосу прокрутки

Красоты ради можно спрятать полосу прокрутки. Для webkit-браузеров (Chrome и Safari) есть очень простой способ:

.card::-webkit-scrollbar {
  display: none;
}

Согласитесь, так страничка выглядит лучше.

Способы применения

В качестве примера мы использовали пустые блоки, но применить этот приём можно во многих приложениях. Вот пара примеров:

1. Ваша собственная версия Instagram:

   

2. Простая доска для заметок:

   

Перевод статьи «How to create horizontally scrollable sections with Flexbox»

Ещё интересное для вас:
— Тест: чьё это рабочее место? Угадываем айтишников по их столам
— Тест: что вы знаете о работе мозга?
— Тест: какой язык программирования вам стоит выбрать для изучения?