Sådan opretter du vandret rullbare sektioner med Flexbox

Denne artikel er fokuseret på eksempel, og problemet, vi skal løse, er temmelig standard.

afsluttet rulningsafsnit: https://codepen.io/ohansemmanuel/full/ybMwpj/
Vejen til læring efter forskrifter er lang, eksempelvis kort og effektiv - Lucius Seneca

Denne artikel er fokuseret på eksempel, og problemet, vi skal løse, er temmelig standard.

Hvordan opretter du et afsnit, der ruller vandret - med stor support på browsere inklusive mobil?

Flexbox! Ja, det er det korte svar.

Lad os kød det lidt ud.

Grundlæggende kodeopsætning

Overvej markeringen nedenfor.

Det er hovedsageligt et afsnit med et par div-elementer som børn.

Kodestilarter

Fordi ingen elsker grimme designs, så lad os have noget meget grundlæggende styling:

De første par linjer, 1 -5 sætter eksplicit bredde og højde på rodelementerne til 100%

Linie 8 giver kroppen en baggrundsfarve, linje 9 fjerner margen rundt om kroppen, mens linier 10 til 12 sikrer, at det direkte barnelement i kroppen er placeret nøjagtigt i midten - lodret og vandret.

For at se dette i kraft skal du give barnet-elementet, noget styling:

Linie 2 er ganske åbenlyst. Linie 3 sikrer, at sektionen som standard tager 100% af dets containerbredde. Linie 4 sørger for, at sektionens højde aldrig går under 200px

Nu skal alt se sådan ud på dette tidspunkt:

Perfekt centreret .kortsektion

Nu lægger vi kortet - indhold "divs" inden for kortsektionen til god brug.

Lad os få nogle meget enkle stilarter igen.

Først skal du lave kort til en flex-container:

.card {display: flex}

Stil derefter .card - indhold som følger:

Linie 3 sikrer, at bredden af ​​hvert kort aldrig er mindre end 200px, alt andet er ret simpelt.

Her er resultatet af det:

Rul sektion med overløb

Som du måske har bemærket, ruller hele siden. Dette skyldes, at der er flere elementer, der kan passe ind i kortsektionen.

Lad os specifikt fortælle browseren om kun at rulle i kortsektionen.

For at gøre det, tilføj dette:

.kort {
  overløb-x: auto;
}

Og vi har et afsnit, der kan rulles:

rullebar sektion med rullebjælke

Godt!

Skjul rullebjælken

Af UX-grunde kan det være en god idé at skjule rullebjælken og stadig have et afsnit, der kan rulles.

Der er en nem udvej - i det mindste til webkit-browsere.

.card :: - webkit-rullefelt {
  display: ingen;
}

Dette vil skjule rullebjælkerne, som uden tvivl er smukkere.

komplet vandret rullet sektion

Applikationer

Jeg har brugt tomme kasser til at illustrere punktet her. Der kan dog være meget anvendelse til denne enkle teknik - en teknik meget værdifuld i mobile apps, hvor du ikke har meget visningsplads

Her er et par eksempler:

(i) Du kan have en masse billeder i et vandret afsnit - din version af instangram

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

(ii) Du kunne bare have en flok tekster, hvis det er nyttigt for dig.

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

For at være ærlig er mulighederne uendelige - alt sammen til din tjeneste.

Vil du blive Pro?

Download mit gratis CSS Grid snyderi, og få også to interaktive Flexbox-kurser af kvalitet gratis!

Få gratis CSS Grid Cheat ark + To kvalitets Flexbox-kurser gratis!

Hent dem nu