Автор оригинала: FreeCodeCamp Community Member.
Если вы создаете веб-сайты, шансы вам попросили создать горизонтальную прокрутку компонента. Это чрезвычайно легко реализовать это, используя только несколько строк Flexbox. Позвольте мне показать вам, как.
Макет проекта
Нам нужно создать контейнер, который будет содержать все изображения, которые мы хотим прокрутить. Вот код:
Стиль проекта
Следующим шагом является добавление стайлинга так, чтобы контейнер прокручивали горизонтально. Для этого я делаю экран контейнера как Flexbox. Кроме того, я устанавливаю значение Overflow-X к AUTO. Вот стиль:
.container { display: flex; overflow-x: auto;}Это как выглядит горизонтальный свиток:
Это обеспечивает наше требование горизонтальной зоны прокрутки. Я не удовлетворен тем, как это выглядит. Есть три вещи, которые я хочу изменить:
- Добавить белое пространство между изображениями
- Избавиться от горизонтальной прокрутки
- Поместите мокроток в середину экрана
Изображения касаются. Давайте добавим белое пространство между ними. Вот CSS для этого:
.container img { margin-right: 15px;}Далее я хочу избавиться от горизонтальной прокрутки, который я могу сделать с этим кодом:
.container::-webkit-scrollbar { display: none;}Последние изменения, которые я хочу сделать, это центр прокрутки находятся в центре экрана. По умолчанию высота HTML – высота элементов. Мне нужно сделать максимум 100% от просмотра просмотра. FlexBox предоставляет возможность центрировать элементы с настройкой выравнивания-элементов. Чтобы использовать эту функциональность, я собираюсь преобразовать Тело отображать как flexbox. Вот код, который я собираюсь добавить для тела:
body { display: flex; align-items: center; height: 100vh;}С этими изменениями здесь выглядит наша окончательная горизонтальная зона прокрутки.
Заключение
Очень легко создать горизонтальную зону прокрутки с помощью Flexbox. Спасибо за прочтение.
Вот еще несколько статей, которые вы можете прочитать:
Вот 5 макетов, которые вы можете сделать с Flexbox Схема гибкой коробки CSS – Flexbox – предоставляет простое решение дизайна и дизайнеров дизайна и … Hackernoon.com Думайте за пределами коробки с помощью CSS-формы – снаружи CSS основан на модели коробки. Если у вас есть изображение, который вы хотите обернуть текст, он обернет … Hackernoon.com Узнайте свойство CSS погранично-радиуса, создавая калькулятор Вы когда-нибудь видели кнопку на веб-странице, которая имеет округлые края? Вы когда-нибудь видели образ, который подходит для … Medium.freecodeCamp.org.
Оригинал: “https://www.freecodecamp.org/news/horizontal-scrolling-using-flexbox-f9d16817f742/”