Kaip įgyvendinti horizontalųjį slinkimą naudojant „Flexbox“

Jei kuriate svetaines, yra tikimybė, kad jūsų paprašys sukurti horizontalaus slinkimo komponentą. Tai įgyvendinti yra labai lengva naudojant tik kelias „Flexbox“ eilutes. Leisk man parodyti, kaip.

Projekto maketas

Turime sukurti talpyklą, kurioje bus visi vaizdai, kuriuos norime slinkti. Štai kodas:

Projekto stilius

Kitas žingsnis - pridėti stilių, kad konteineris slinktų horizontaliai. Norėdami tai padaryti, konteinerį rodau kaip „flexbox“. Be to, nustatau „overflow-x“ vertę į „auto“. Čia yra stilius:

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

Štai kaip atrodo horizontalus slinkimas:

Tai pateikia mūsų reikalavimą horizontaliai slinkti sritį. Manęs netenkina tai, kaip atrodo. Yra trys dalykai, kuriuos noriu pakeisti:

  • Tarp vaizdų pridėkite baltą tarpą
  • Atsikratykite horizontalios slinkties juostos
  • Padėkite slinkiklį ekrano viduryje

Vaizdai liečia. Pridėkime šiek tiek tarpo tarp jų. Štai CSS:

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

Tada noriu atsikratyti horizontalios slinkties juostos, kurią galiu padaryti naudodamas šį kodą:

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

Paskutinis pakeitimas, kurį noriu padaryti, yra slinkimo centravimas ekrano centre. Pagal numatytuosius nustatymus HTML aukštis yra elementų aukštis. Turiu padaryti, kad aukštis būtų 100% peržiūros srities. „Flexbox“ suteikia galimybę centruoti elementus nustatymu „Align-items“. Norėdami naudoti šią funkciją, aš konvertuosiu bodyrodyti į „flexbox“. Štai kodas, kurį ketinu pridėti kūnui:

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

Su šiais pakeitimais štai kaip atrodo mūsų galutinė horizontalaus slinkimo sritis.

Išvada

Labai lengva sukurti horizontalią slinkties sritį naudojant „flexbox“. Ačiū, kad skaitėte.

Čia yra dar keletas straipsnių, kuriuos galbūt norėtumėte perskaityti:

Čia yra 5 maketai, kuriuos galite padaryti naudodami „FlexBox“

CSS „Flexible Box Layout“ - „Flexbox“ - pateikia paprastą dizaino ir išdėstymo problemų dizainerių ir… hackernoon.com sprendimą. Mąstykite už lango ribų su CSS formos išorės

CSS yra pagrįstas dėžutės modeliu. Jei turite vaizdą, kuris yra apskritimas, ant kurio norite apvynioti tekstą, jis apvynios hackernoon.com Sužinokite CSS kraštinės spindulio ypatybę sukurdami skaičiuoklę

Ar kada nors matėte mygtuką suapvalintais kraštais tinklalapyje? Ar jūs kada nors matėte vaizdą, kuris tinka ... medium.freecodecamp.org