Ako izrađujete web stranice, velika je vjerojatnost da ste zatraženi da napravite komponentu vodoravnog pomicanja. Izuzetno je jednostavno to implementirati pomoću samo nekoliko redaka Flexboxa. Dopustite mi da vam pokažem kako.
Izgled projekta
Moramo stvoriti spremnik koji će sadržavati sve slike koje želimo pomicati. Evo koda:
Stiliziranje projekta
Sljedeći je korak dodati styling tako da se spremnik pomiče vodoravno. Da bih to učinio, spremnik ću prikazati kao flexbox. Uz to postavljam vrijednost overflow-x na auto. Evo stila:
.container { display: flex; overflow-x: auto;}Ovako izgleda vodoravni pomak:
To nam daje zahtjev za vodoravnim područjem pomicanja. Nisam zadovoljan kako to izgleda. Tri su stvari koje želim promijeniti:
- Dodajte razmak između slika
- Riješite se vodoravne trake za pomicanje
- Postavite klizač na sredinu zaslona
Slike su dirljive. Dodajmo malo razmaka između njih. Evo CSS-a za ovo:
.container img { margin-right: 15px;}Dalje se želim riješiti vodoravne trake za pomicanje što mogu učiniti s ovim kodom:
.container::-webkit-scrollbar { display: none;}Posljednja promjena koju želim učiniti je centriranje pomicanja u središtu zaslona. Prema zadanim postavkama visina html-a je visina elemenata. Moram napraviti visinu od 100% vidnog polja. Flexbox pruža način centriranja stavki postavkom poravnanja stavki. Da bih koristio ovu funkcionalnost, pretvorit bodyću prikaz u flexbox. Evo koda koji ću dodati za tijelo:
body { display: flex; align-items: center; height: 100vh;}Uz ove promjene, evo kako izgleda naše konačno vodoravno područje pomicanja.
Zaključak
Vrlo je jednostavno stvoriti vodoravno područje pomicanja pomoću flexboxa. Hvala na čitanju.
Evo još nekoliko članaka koje biste možda željeli pročitati:
Evo 5 izgleda koje možete napraviti s FlexBoxom
CSS fleksibilni raspored kutija - Flexbox - pruža jednostavno rješenje dizajnera i dizajnera problema i izgleda ... hackernoon.com Razmišljajte izvan okvira s CSS oblikom
CSS se temelji na box modelu. Ako imate sliku koja je krug oko kojega želite umotati tekst, ona će se omotati… hackernoon.com Naučite svojstvo CSS-radijus granice izrađivanjem kalkulatora
Jeste li ikada vidjeli gumb na web stranici sa zaobljenim rubovima? Jeste li ikada vidjeli sliku koja stane na ... medium.freecodecamp.org