Flexbox v CSS a HTML: Pokyny na zarovnanie v hlavnej osi

V tejto príručke sa dozviete, ako používať Flexbox na zarovnanie prvkov v kontajneri flex pozdĺž hlavnej osi. Zarovnanie pozdĺž priečnej osi sme už prebrali, ale hlavná os je rovnako dôležitá. Technológia Flexbox vám ponúka niekoľko spôsobov, ako zarovnanie prvkov flexibilne prispôsobiť. Poďme sa na ne pozrieť bližšie!

Kľúčové zistenia

• Zarovnanie v hlavnej osi sa vykonáva pomocou vlastnosti justify-content.
• Na prispôsobenie rozmiestnenia môžete použiť rôzne hodnoty, napríklad center, flex-start, flex-end, space-between a space-around.
• Nastavenia flexboxu majú priamy vplyv na usporiadanie prvkov v požadovanom smere.

Pokyny krok za krokom

1. Inicializujte kontajner flex

Začnite vytvorením kontajnera flex a nastavením jeho smeru flex. V tomto príklade nastavíme smer flex na riadok. To znamená, že prvky budú usporiadané do radu zľava doprava.

2. Predvolené zarovnanie prvkov

Ak umiestnite prvky do kontajnera bez špeciálnych úprav štýlovania, uvidíte, že sú štandardne zarovnané v hornej časti kontajnera. Na vizualizáciu im môžete dať šírku 100 pixelov.

3. zarovnanie na stred

Ak chcete prvky vycentrovať, použite vlastnosť CSS justify-content s hodnotou center. Tým sa prvky zarovnajú na stred kontajnera, čím sa dosiahne veľmi príťažlivé usporiadanie.

4. zarovnanie prvkov na konci

Ak chcete zarovnať prvky na konci kontajnera, môžete použiť vlastnosť justify-content s hodnotou flex-end. Tým sa prvky presunú na pravý koniec kontajnera.

5. zarovnanie prvkov na začiatku

Predvolené správanie bez prispôsobenia je flex-start, čo znamená, že prvky zostanú na začiatku kontajnera. Toto nastavenie je užitočné, ak chcete mať prehľadné a čisté usporiadanie prvkov na začiatku kontajnera.

6. Zmena smeru flex

Ak zmeníte smer flex na stĺpec, hlavná os sa zmení z horizontálnej na vertikálnu. To znamená, že prvky sú teraz usporiadané zhora nadol.

7. zarovnanie prvkov na stred vo zvislom smere

Prvky v tomto novom zarovnaní môžete vycentrovať aj pomocou justify-content: center. Toto nastavenie zabezpečí, že sa všetky prvky zobrazia v strede kontajnera.

8. zarovnanie v spodnej časti

Ak chcete mať prvky v spodnej časti kontajnera, môžete opäť nastaviť flex-end. Tým sa prvky umiestnia na spodok kontajnera.

9. použitie vlastností priestoru

Flexbox vám tiež umožňuje ovládať priestor medzi prvkami pomocou vlastností space-between, space-around a space-evenly. Tieto vlastnosti rozdeľujú dostupný priestor rôznymi spôsobmi.

10. použitie funkcie space-between

Pri použití justify-content: space-between zostáva prvý prvok v hornej časti a posledný prvok v dolnej časti kontajnera, pričom priestor medzi prvkami je rozdelený rovnomerne.

11. vyskúšajte funkciu space-around

Ak použijete space-around, okolo každého prvku sa vytvorí rovnaký priestor. Tento priestor je viditeľný v strede kontajnera, pričom prvky zostávajú rovnomerne rozložené.

12. použite space-evenly

Použitie funkcie space-evenly zabezpečí, že medzi prvkami a okrajom kontajnera bude všade rovnaký priestor.

Zhrnutie

V tejto príručke ste sa naučili, ako nastaviť zarovnanie v hlavnej osi pomocou Flexboxu. Pomocou justify-content môžete byť veľmi flexibilní pri umiestňovaní prvkov. Dozvedeli ste sa aj o rôznych vlastnostiach, ktoré vám pomôžu dosiahnuť požadované rozloženie. Použite tieto vedomosti na vytvorenie príťažlivých a používateľsky prívetivých návrhov!