В этой статье мы рассмотрим решение повседневной задачи: как создать горизонтально прокручиваемую секцию сайта? Если вкратце, ответ — Flexbox.
Давайте разберёмся с этим более детально.
Каркас
Взгляните на эту разметку. Это простой блок section с несколькими вложенными div:
1 2 3 4 5 6 7 8 9 10 11 12 | <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> |
Стили
Плохой дизайн никто не любит, поэтому давайте сделаем страничку более опрятной:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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">:
1 2 3 4 5 | .card { background-color: #fff; min-width: 100%; min-height: 200px; } |
С первым свойством всё понятно, второе указывает секции всё время занимать 100% ширины родительского элемента, а третье гарантирует, что высота секции всегда будет не менее 200px. Вот, что получилось на данном этапе: 
Поместим все блоки card–content в секцию card и снова займёмся стилями. Сперва сделаем card flex-контейнером:
1 | .card {display: flex} |
Затем займёмся .card–content:
1 2 3 4 5 | .card--content { background-color: #e74c3c; min-width: 200px; margin: 5px; } |
Третья строка гарантирует, что ширина каждой карточки будет не меньше 200px, всё остальное просто и понятно. Вот результат: 
Как вы могли заметить, прокручивается вся страница. Так происходит, потому что в секцию card помещаются не все элементы.
Исправим это так:
1 2 3 | .card { overflow-x: auto; } |
И теперь прокручивается только секция: 
Неплохо!
Прячем полосу прокрутки
Красоты ради можно спрятать полосу прокрутки. Для webkit-браузеров (Chrome и Safari) есть очень простой способ:
1 2 3 | .card::-webkit-scrollbar { display: none; } |
Согласитесь, так страничка выглядит лучше. 
Способы применения
В качестве примера мы использовали пустые блоки, но применить этот приём можно во многих приложениях. Вот пара примеров:
Ваша собственная версия Instagram:
Простая доска для заметок:
Перевод статьи «How to create horizontally scrollable sections with Flexbox»