В этой статье мы рассмотрим решение повседневной задачи: как создать горизонтально прокручиваемую секцию сайта? Если вкратце, ответ — 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;
}
Согласитесь, так страничка выглядит лучше.
Способы применения
В качестве примера мы использовали пустые блоки, но применить этот приём можно во многих приложениях. Вот пара примеров:
Перевод статьи «How to create horizontally scrollable sections with Flexbox»