Практическое руководство: реализуем горизонтальную прокрутку секции на Flexbox
Рассказываем, как создать горизонтально прокручиваемую секцию веб-странички при помощи Flexbox. Спойлер: это очень просто.
40К открытий42К показов
В этой статье мы рассмотрим решение повседневной задачи: как создать горизонтально прокручиваемую секцию сайта? Если вкратце, ответ — Flexbox.
Давайте разберёмся с этим более детально.
Каркас
Взгляните на эту разметку. Это простой блок section
с несколькими вложенными div
:
Стили
Плохой дизайн никто не любит, поэтому давайте сделаем страничку более опрятной:
Сперва мы явно задаём ширину и высоту корневых элементов равной 100%
. Затем мы определяем цвет фона, убираем отступ у body
и центрируем вложенный в него элемент.
Для наглядности применим стили к этому элементу <section class="card">
:
С первым свойством всё понятно, второе указывает секции всё время занимать 100% ширины родительского элемента, а третье гарантирует, что высота секции всегда будет не менее 200px
. Вот, что получилось на данном этапе:
Поместим все блоки card--content
в секцию card
и снова займёмся стилями. Сперва сделаем card
flex-контейнером:
Затем займёмся .card--content
:
Третья строка гарантирует, что ширина каждой карточки будет не меньше 200px
, всё остальное просто и понятно. Вот результат:
Как вы могли заметить, прокручивается вся страница. Так происходит, потому что в секцию card
помещаются не все элементы.
Исправим это так:
И теперь прокручивается только секция:
Неплохо!
Прячем полосу прокрутки
Красоты ради можно спрятать полосу прокрутки. Для webkit-браузеров (Chrome и Safari) есть очень простой способ:
Согласитесь, так страничка выглядит лучше.
Способы применения
В качестве примера мы использовали пустые блоки, но применить этот приём можно во многих приложениях. Вот пара примеров:
- Ваша собственная версия Instagram:
- Простая доска для заметок:
40К открытий42К показов