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

горизонтальная прокрутка

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

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

Каркас

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

Стили

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

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

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

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

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

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

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

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

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

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

Неплохо!

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

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

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

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

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

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

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

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