Как реализовать горизонтальную прокрутку с помощью Flexbox

1656486380 kak realizovat gorizontalnuyu prokrutku s pomoshhyu
4d5EkVE0IxLXQkRlSL3MOAYRnKtvmaqpqR2M
Горизонтальная прокрутка с помощью Flexbox

Если вы создаете веб-сайты, скорее всего, вас попросили создать компонент горизонтальной прокрутки. Это очень легко реализовать, используя лишь несколько строк Flexbox. Позвольте мне показать вам как.

Макет проекта

Нам нужно создать контейнер, который будет содержать все изображения, которые мы хотим прокручивать. Вот код:

<div class="container">    <img src=" alt="Bhutan">    <img src="images/bhutan2.jpg" alt="Bhutan">    <img src="images/bhutan3.jpg" alt="Bhutan">    <img src="images/bhutan4.jpg" alt="Bhutan">    <img src="images/bhutan5.jpg" alt="Bhutan">    <img src="images/bhutan6.jpg" alt="Bhutan">    <img src="images/bhutan7.jpg" alt="Bhutan"></div>

Стилизацию проекта

Следующим шагом является добавление стиля, чтобы контейнер прокручивался горизонтально. Для этого я отображаю контейнер как flexbox. Кроме того, я устанавливаю значение overflow-x на auto. Вот стиль:

.container {    display: flex;    overflow-x: auto;}

Вот как выглядит горизонтальная прокрутка:

OtTK-LibpJ6mcBOeHSmI2wIcXrlzMzzw5VND
Начальный вариант нашей горизонтальной прокрутки

Это обеспечивает наше требование по горизонтальной области прокрутки. Я не удовлетворен тем, как это выглядит. Есть три вещи, которые я хочу изменить:

  • Добавьте пробел между изображениями
  • Избавьтесь от горизонтальной полосы прокрутки
  • Поместите скроллер посреди экрана

Образы трогательны. Давайте добавим белое пространство между ними. Вот CSS для этого:

.container img {    margin-right: 15px;}

Далее я хочу избавиться от горизонтальной полосы прокрутки, которую я могу сделать с помощью этого кода:

.container::-webkit-scrollbar {    display: none;}

Последнее изменение, которое я хочу сделать, это центрировать прокрутку в центре экрана. По умолчанию высота HTML является высотой элементов. Мне нужно сделать так, чтобы высота составляла 100% области просмотра. Flexbox позволяет центрировать элементы с помощью настройки выравнивания элементов. Чтобы использовать эту функцию, я собираюсь конвертировать файл body для отображения как flexbox. Вот код, который я собираюсь добавить для тела:

body {   display: flex;   align-items: center;   height: 100vh;}

С этими изменениями вот как выглядит наша конечная область горизонтальной прокрутки.

qJCD4OP64IdYdHTGPKnFVBKhFLrkiIWDrKSe

Вывод

С помощью flexbox очень легко создать область горизонтальной прокрутки. Спасибо, что прочли.

Вот еще несколько статей, которые вы можете прочесть:

Вот 5 макетов, которые вы можете сделать с помощью FlexBox
Гибкий макет коробки CSS — Flexbox — предоставляет простое решение для дизайнеров и проблем дизайна…hackernoon.comДумайте нестандартно с помощью формы CSS снаружи
CSS основан на коробочной модели. Если у вас есть изображение, которое представляет собой круг, вокруг которого вы хотите обернуть текст, оно перенесет…hackernoon.comИзучите свойство CSS border-radius, создав калькулятор
Вы когда-нибудь видели кнопку на веб-странице с закругленными краями? Вы когда-нибудь видели изображение, которое вписывается в…medium.freecodecamp.org

Добавить комментарий

Ваш адрес email не будет опубликован.