Galéria s Flexboxom: Sprievodca vytváraním responzívnych rozvrhnutí

V tomto návode sa dozviete, ako vytvoriť atraktívne rozvrhnutie galérie pomocou Flexboxu v jazykoch CSS a HTML. Model flexbox poskytuje flexibilné možnosti usporiadania prvkov na webovej lokalite , najmä pri rozloženiach, ako sú galérie, kde je elegantná a citlivá prezentácia kľúčová. Budeme diskutovať o štruktúre kódu HTML, ako aj o zodpovedajúcich štýloch CSS a postupne ich vytvoríme.

Kľúčové poznatky

• V tomto učebnom texte sa naučíte používať Flexbox na vytvorenie rozloženia založeného na obrázkoch vrátane použitia prvkov kontajnera a použitia vlastností CSS, ako sú display: flex, position: absolute a justify-content: space-between.

Sprievodca krok za krokom

Krok 1: Vytvorenie základnej štruktúry kódu HTML

Začnite základnou štruktúrou dokumentu HTML. Vytvorte kontajnerový div s názvom main a pridajte ďalší div s triedou images, ktorý obsahuje všetky prvky značky image (IMG). Tieto obrázky môžete získať z webovej lokality s obrázkami vo verejnej doméne. Všimnite si, že rozloženie sa zameriava na tri obrázky, takže štvrtý sa nezobrazí.

Krok 2: Definujte CSS pre hlavný kontajner

Pre štýl hlavného kontajnera nastavte šírku na 100 %, aby sa prispôsobil šírke okna. Výšku nastavte na 140 pixelov a uistite sa, že pozícia je relatívna, aby sa absolútne pozície, ktoré použijeme pre obrázky a šípky, mohli správne orientovať.

Krok 3: Štýlovanie kontajnera pre obrázky

Nastavte kontajner pre obrázky (.images) na position: absolute, aby plával nad kontajnerom pre šípky. Nastavte šírku a výšku na 100 %, aby bol úplne umiestnený v hlavnom kontajneri. Použite tiež vlastnosti flexboxu.

Krok 4: Použitie vlastností flexboxu pre rozloženie obrázkov

Pre triedu .images nastavte display: flex a zarovnajte obsah do riadku pomocou flex-direction: row. Pridaním medzery medzi obrázkami o veľkosti 4 pixelov sa medzi nimi vytvorí väčší priestor, čo rozvoľní rozloženie.

Krok 5: Definujte štýly obrázkov

Obrázky (img) v galérii by ste mali nastaviť na šírku 240 pixelov a výšku 140 pixelov pomocou vlastnosti flexbox flex-basis. Môžete tiež nastaviť flex-grow a flex-shrink na hodnotu 0, aby obrázky nemenili svoju veľkosť a vždy si zachovali zvolené rozmery.

Krok 6: Vytvorenie kontajnera so šípkami

Teraz prichádza na rad kontajner pre navigačné šípky. Tento kontajner musí byť tiež nastavený na position: absolute a mať výšku a šírku 100 %, aby bol vždy umiestnený nad obrázkami. Na horizontálne usporiadanie šípok použite display: flex.

Krok 7: Štýlovanie šípok

Nastavte vlastnosť justify-content na hodnotu space-between, aby bola jedna šípka vľavo a druhá vpravo. Pre šípky môžete použiť znaky Unicode na zobrazenie šípok. Nastavte farbu textu na bielu a uistite sa, že pozadie šípok je priehľadné.

Krok 8: Vloženie efektov navádzania

Ak chcete pridať efekt hover, môžete zmeniť farbu pozadia šípok, keď nad ne prejdete myšou. Nastavte ju na mierne priehľadnú bielu farbu, aby sa pozadie rozsvietilo a pôsobilo interaktívne.

Krok 9: Otestujte a prispôsobte rozloženie

Teraz je dôležité otestovať celé rozloženie a vykonať všetky potrebné úpravy. Rozstupy medzi obrázkami, veľkosť kontajnera alebo celkovú farebnú schému môžete ľahko zmeniť v závislosti od požiadaviek vašej webovej lokality.

Zhrnutie

V tomto návode ste sa naučili vytvoriť responzívnu galériu obrázkov pomocou Flexboxu. Prešli ste krokmi od základnej štruktúry až po vizuálne efekty. Flexbox umožňuje flexibilné usporiadanie prvkov, vďaka čomu sú vaše návrhy mimoriadne atraktívne.