Galéria Flexbox-szal: Útmutató a reszponzív elrendezések létrehozásához

Ebben a bemutatóban megtanulhatod, hogyan hozhatsz létre egy tetszetős galéria elrendezést a Flexbox segítségével CSS-ben és HTML-ben. A flexbox modell rugalmas lehetőségeket biztosít az elemek elrendezéséhez a webhelyen , különösen az olyan elrendezéseknél, mint a galériák, ahol az elegáns és reszponzív megjelenítés kulcsfontosságú. Megbeszéljük a HTML-kód felépítését, valamint a megfelelő CSS-stílusokat, és lépésről lépésre felépítjük őket.

A legfontosabb tudnivalók

• Ebben a bemutatóban megtanulja, hogyan használhatja a Flexboxot egy képalapú elrendezés létrehozásához, beleértve a konténerelemek használatát és az olyan CSS-tulajdonságok alkalmazását, mint a display: flex, position: absolute és justify-content: space-between.

Lépésről-lépésre útmutató

1. lépés: A HTML-kód alapszerkezetének létrehozása

Kezdje a HTML-dokumentum alapszerkezetével. Hozzon létre egy main nevű konténer div-et, és adjon hozzá egy másik div-et images osztályú div-et, amely az összes képcímke elemet (IMG) tartalmazza. Ezeket a képeket egy olyan weboldalról szerezheti be, ahol nyilvános képek találhatók. Vegye figyelembe, hogy az elrendezés három képre összpontosít, így a negyedik nem jelenik meg.

2. lépés: A fő konténer CSS-ének meghatározása

A fő konténer stílusához állítsa be a szélességet 100%-ra, hogy az ablak szélességéhez igazodjon. A magasságot állítsa 140 pixelre, és győződjön meg róla, hogy a pozicionálás relatív, hogy a képek és a nyilak számára használt abszolút pozíciók megfelelően tudjanak tájolódni.

3. lépés: A képek tárolójának kialakítása

Állítsa be a képek konténerének (.images) position: absolute értékét, hogy a nyilak konténere fölött lebegjen. Állítsuk a szélességet és a magasságot 100%-ra, hogy teljesen a fő konténerben helyezkedjen el. Használja a flexbox tulajdonságokat is.

4. lépés: Alkalmazza a flexbox tulajdonságokat a képek elrendezéséhez

A .images osztály esetében állítsa be a display: flex értéket, és igazítsa a tartalmat sorba a flex-direction: row értékkel. A képek közötti 4 pixeles rés hozzáadása nagyobb helyet biztosít a képek között, ami fellazítja az elrendezést.

5. lépés: Képstílusok meghatározása

A galériában lévő képeket (img) 240 pixel szélesre és 140 pixel magasra kell beállítania a flexbox flex-basis tulajdonságának használatával. A flex-grow és flex-shrink értékeket is beállíthatja 0-ra, így a képek mérete nem változik, és mindig megtartják a kiválasztott méreteket.

6. lépés: Nyílt konténer létrehozása

Most következik a navigációs nyilak konténere. Ezt a konténert is be kell állítani position: absolute értékre, és 100%-os magassággal és szélességgel kell rendelkeznie, hogy mindig a képek fölé kerüljön. Használja a display: flex funkciót a nyilak vízszintes elrendezéséhez.

7. lépés: A nyilak formázása

Állítsa a justify-content tulajdonságot space-between értékre, hogy az egyik nyíl balra, a másik pedig jobbra kerüljön. A nyilak megjelenítéséhez használhat Unicode karaktereket. Állítsa a szöveg színét fehérre, és győződjön meg róla, hogy a nyilak háttere átlátszó.

8. lépés: Beszúrja a lebegőhatásokat

A lebegőhatás hozzáadásához megváltoztathatja a nyilak háttérszínét, amikor az egeret föléjük mozgatja. Állítsa ezt enyhén átlátszó fehérre, hogy a háttér világítson, és interaktív érzetet adjon.

9. lépés: Az elrendezés tesztelése és testreszabása

Most fontos, hogy tesztelje a teljes elrendezést, és elvégezze a szükséges módosításokat. A képek közötti távolság, a tároló mérete vagy az általános színséma könnyen módosítható a weboldal követelményeinek megfelelően.

Összefoglaló

Ebben a bemutatóban megtanulta, hogyan hozhat létre reszponzív képgalériát Flexbox segítségével. Végigjártad a lépéseket az alapszerkezettől a vizuális hatásokig. A Flexbox lehetővé teszi az elemek rugalmas elrendezését, ami különösen vonzóvá teszi a terveket.