Cum se implementeaza derularea orizontala utilizand
Defilare orizontală utilizând Flexbox

Dacă creați site-uri web, este posibil să vi se solicite să creați o componentă de defilare orizontală. Este extrem de ușor să implementați acest lucru folosind doar câteva linii de Flexbox. Lasă-mă să-ți arăt cum.

Aspect proiect

Trebuie să creăm un container care să conțină toate imaginile pe care dorim să le derulăm. Iată codul:

<div class="container">    <img src="https://www.freecodecamp.org/news/horizontal-scrolling-using-flexbox-f9d16817f742/images/bhutan1.jpg" 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>

Stilizarea proiectului

Următorul pas este să adăugați stil, astfel încât containerul să se deruleze orizontal. Pentru a face acest lucru, afișez containerul ca flexbox. În plus, setez valoarea overflow-x la auto. Iată stilul:

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

Așa arată defilarea orizontală:

Cum se implementeaza derularea orizontala utilizand
Versiunea inițială a defilării noastre orizontale

Acest lucru ne oferă cerința unei zone de derulare orizontală. Nu sunt mulțumit de cum arată. Există trei lucruri pe care vreau să le schimb:

  • Adăugați spațiu alb între imagini
  • Scăpați de bara de defilare orizontală
  • Așezați scrollerul în mijlocul ecranului

Imaginile sunt emoționante. Să adăugăm un spațiu alb între ele. Iată CSS pentru acest lucru:

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

În continuare vreau să scap de bara de defilare orizontală pe care o pot face cu acest cod:

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

Ultima modificare pe care vreau să o fac este să centrez derularea sunt în centrul ecranului. În mod implicit, înălțimea html este înălțimea elementelor. Trebuie să fac ca înălțimea să fie 100% din fereastra de vizualizare. Flexbox oferă o modalitate de centrare a articolelor cu setarea aliniament-articole. Pentru a utiliza această funcționalitate, voi converti fișierul body pentru a afișa ca flexbox. Iată codul pe care îl voi adăuga pentru corp:

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

Cu aceste modificări, iată cum arată zona noastră de derulare orizontală finală.

1612194908 246 Cum se implementeaza derularea orizontala utilizand

Concluzie

Este foarte ușor să creați o zonă de defilare orizontală utilizând flexbox. Mulțumesc pentru lectură.

Iată câteva articole pe care ați putea dori să le citiți:

Iată 5 machete pe care le puteți realiza cu FlexBox
Aspectul CSS Flexible Box Layout – Flexbox – oferă o soluție simplă la proiectarea și proiectarea problemelor de aspect și …hackernoon.comGândiți-vă în afara cutiei cu CSS forma-afară
CSS se bazează pe un model de cutie. Dacă aveți o imagine care este un cerc pe care doriți să înfășurați textul, acesta va înfășura …hackernoon.comAflați proprietatea CSS-border-radius construind un calculator
Ați văzut vreodată un buton pe o pagină web care are margini rotunjite? Ați văzut vreodată o imagine care se încadrează într-un …medium.freecodecamp.org