
Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.
У цій статті ми розглянемо рішення повсякденної задачі: як створити горизонтально прокручувану секцію сайту? Якщо коротко, відповідь – 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
і центруємо вкладений в нього елемент.
Для наочності застосуємо стилі до цього елементу:
.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”
Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?