Hogyan lehet megvalósítani a vízszintes görgetést a Flexbox segítségével

Webhelyek létrehozása esetén nagy valószínűséggel felkérést kapott, hogy hozzon létre egy vízszintes görgető összetevőt. Rendkívül egyszerű ezt csak néhány soros Flexbox segítségével megvalósítani. Hadd mutassam meg, hogyan.

Projekt elrendezése

Létre kell hoznunk egy tárolót, amely tartalmazza az összes képet, amelyet görgetni akarunk. Itt van a kód:

A projekt stílusa

A következő lépés a stílus hozzáadása, hogy a tároló vízszintesen gördüljön. Ehhez a tárolót flexboxként jelenítem meg. Ezenkívül az overflow-x értéket automatikusra állítom. Itt van a stílus:

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

Így néz ki a vízszintes tekercs:

Ez biztosítja a vízszintes görgetési terület követelményét. Nem vagyok elégedett azzal, hogy néz ki. Három dologban szeretnék változtatni:

  • Helyezzen el fehér teret a képek között
  • Megszabadulni a vízszintes gördítősávtól
  • Helyezze a görgetőt a képernyő közepére

A képek meghatóak. Adjunk hozzá egy kis helyet a köztük. Itt van ennek a CSS:

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

Ezután szeretnék megszabadulni a vízszintes gördítősávtól, amelyet ezzel a kóddal megtehetek:

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

Az utolsó változtatás, amelyet a görgetés középre helyezésére szeretnék tenni, a képernyő közepén található. Alapértelmezés szerint a html magassága az elemek magassága. Meg kell tennem, hogy a magasság a nézetablak 100% -a legyen. A Flexbox lehetővé teszi az elemek középre igazítását az elemek igazítása beállítással. Ennek a funkciónak a használatához konvertálni fogom a bodyfájlt flexbox-ként megjeleníteni. Itt van a kód, amelyet hozzáadok a testhez:

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

Ezekkel a változásokkal a következőképpen néz ki a végső vízszintes görgetési területünk.

Következtetés

Nagyon könnyű vízszintes görgetési területet létrehozni a flexbox segítségével. Köszönöm, hogy elolvasta.

Íme néhány további cikk, amelyet érdemes elolvasni:

Itt van 5 elrendezés, amelyet a FlexBox segítségével készíthet

A CSS Flexible Box Layout - flexbox - egy egyszerű megoldás, hogy a tervezés és az elrendezés problémák tervezők és ... hackernoon.com Szerintem kívül a doboz CSS alakra kívül

A CSS dobozon kívüli modellen alapul. Ha van egy kép, ami egy kör, amit szeretne sortörés körül, akkor csomagolja ... hackernoon.com Ismerje meg a CSS border-radius tulajdonság építve egy számológép

Látott már egy gombot egy weboldalon, amelynek lekerekített élei vannak? Láttál már olyan képet, amely illeszkedik egy… medium.freecodecamp.org oldalba