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

Дізнайтесь більше про нові кар'єрні можливості в 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;}

Погодьтеся, так сторіночка виглядає краще.

Способи застосування

Як приклад ми використали порожні блоки, але застосувати цей прийом можна у багатьох застосуваннях. Ось пара прикладів :

Ваша власна версія Instagram:
Проста дошка для заміток:

Переклад статті “How to create horizontally scrollable sections with Flexbox”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?

Post Views: 1 798