Как да създадете хоризонтално превъртащи се секции с Flexbox

Тази статия е съсредоточена върху примера и проблемът, който ще решим, е доста стандартен.

попълнен раздел за превъртане: https://codepen.io/ohansemmanuel/full/ybMwpj/
Пътят към ученето по заповед е дълъг, пример кратък и ефективен - Луций Сенека

Тази статия е съсредоточена върху примера и проблемът, който ще решим, е доста стандартен.

Как да създадете раздел, който се превърта хоризонтално - с голяма поддръжка на браузъри, включително за мобилни устройства?

Flexbox! Да, това е краткият отговор.

Нека да извадим това малко.

Настройка на основен код

Помислете за маркировката по-долу.

Това е по същество раздел с няколко разделителни елемента като деца.

Кодови стилове

Тъй като никой не обича грозните дизайни, нека имаме някои много основни стилове:

Първите няколко реда 1 -5 изрично задават ширината и височината на кореновите елементи на 100%

Линия 8 придава на тялото цвят на фона, линия 9 отнема ръба около тялото, докато линиите 10 до 12 гарантират, че директният детски елемент на тялото е разположен точно в центъра - вертикално и хоризонтално.

За да видите това в действителност, дайте на дъщерния елемент,

някакъв стил:

Линия 2 е съвсем очевидна. Ред 3 гарантира, че секторът поема по подразбиране 100% от ширината на контейнера. Линия 4 гарантира, че височината на секцията никога не надвишава 200px

Сега всичко трябва да изглежда така:

Перфектно центрирана секция .card

Сега ще поставим картата - съдържанието „divs“ в раздела с картата за добро използване.

Нека отново имаме няколко много прости стила.

Първо, направете картата с гъвкав контейнер:

.card {display: flex}

Тогава стил .card - съдържание, както следва:

Ред 3 гарантира, че ширината на всяка карта никога не е по-малка от 200 пиксела, всичко останало е доста просто.

Ето резултата от това:

Превъртете раздел с преливник

Както може би сте забелязали, цялата страница се превърта. Това е така, защото има повече елементи, отколкото може да се впише в секцията с карти.

Нека конкретно да кажем на браузъра да превърта само секцията с карти.

За да направите това, добавете това:

.card {
  overflow-x: автоматично;
}

И ние имаме превъртащ се раздел:

превъртане секция с лента за превъртане

Добре!

Скриване на лентата за превъртане

Поради UX причини може да искате да скриете лентата за превъртане и все още да имате раздел за превъртане.

Има лесен изход - поне за браузърите на уебкити.

.card :: - webkit-scrollbar {
  дисплей: няма;
}

Това ще скрие лентите за превъртане, което е вероятно по-красиво.

пълна хоризонтално превъртана секция

Приложения

Използвах празни кутии, за да илюстрирам смисъла тук. Въпреки това, може да има много приложение за тази проста техника - техника, много ценна в мобилните приложения, където нямате много място за гледане

Ето няколко примера:

(i) Може да имате куп изображения в хоризонтална секция - вашата версия на instagram

https://codepen.io/ohansemmanuel/full/NjpmWY/

(ii) Може да имате само куп текстове, ако това е полезно за вас.

https://codepen.io/ohansemmanuel/full/RVpOaV/

За да бъда честен, възможностите са безкрайни - всички на ваше разположение.

Искате ли да станете професионалист?

Изтеглете безплатния ми CSS Grid чит лист, а също и безплатно получете два качествени интерактивни курса Flexbox!

Вземете безплатно CSS Grid Cheat sheet + Два качествени Flexbox курса безплатно!

Вземете ги сега