Sådan implementeres vandret rulning ved hjælp af Flexbox

Hvis du opretter websteder, er chancerne for, at du er blevet bedt om at oprette en vandret rullende komponent. Det er ekstremt let at implementere dette ved hjælp af blot et par Flexbox-linjer. Lad mig vise dig hvordan.

Projektlayout

Vi er nødt til at oprette en container, der indeholder alle de billeder, vi vil rulle. Her er koden:

Styling af projektet

Næste trin er at tilføje styling, så containeren ruller vandret. For at gøre dette laver jeg containerens display som flexbox. Derudover indstiller jeg overflow-x-værdien til auto. Her er stilen:

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

Sådan ser den vandrette rulle ud:

Det giver vores krav om et vandret rulleområde. Jeg er ikke tilfreds med, hvordan det ser ud. Der er tre ting, jeg vil ændre:

  • Tilføj hvidt mellemrum mellem billederne
  • Slip af med den vandrette rullepanel
  • Placer scrolleren midt på skærmen

Billederne er rørende. Lad os tilføje noget hvidt mellemrum mellem dem. Her er CSS for dette:

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

Dernæst vil jeg slippe af med den vandrette rullepanel, som jeg kan gøre med denne kode:

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

Den sidste ændring, som jeg vil gøre, er at centrere rullingen i midten af ​​skærmen. Som standard er htmlens højde elementernes højde. Jeg er nødt til at gøre højden til 100% af visningen. Flexbox giver en måde at centrere emner på med indstillingen til justeringselementer. For at bruge denne funktionalitet skal jeg konvertere den bodytil visning som flexbox. Her er den kode, som jeg vil tilføje til kroppen:

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

Med disse ændringer er her, hvad vores endelige vandrette rulleområde ser ud.

Konklusion

Det er meget let at oprette et vandret rulleområde ved hjælp af flexbox. Tak for læsningen.

Her er nogle flere artikler, du måske vil læse:

Her er 5 layout, som du kan lave med FlexBox

CSS Flexible Box Layout - Flexbox - giver en enkel løsning på design- og layoutproblemer designere og ... hackernoon.com Tænk uden for boksen med CSS-form udenfor

CSS er baseret på en boksmodel. Hvis du har et billede, der er en cirkel, som du vil pakke tekst rundt, vil det pakke ... hackernoon.com Lær egenskaben CSS border-radius ved at oprette en lommeregner

Har du nogensinde set en knap på en webside, der har afrundede kanter? Har du nogensinde set et billede, der passer ind i et ... medium.freecodecamp.org