Flexibilni model v CSS & HTML: navodila za poravnavo v glavni osi

V tem navodilu boš izvedel, kako uporabiti Flexbox za poravnavo elementov v Flex-Containerju vzdolž glavne osi. Že smo obravnavali poravnavo v prečni smeri, vendar je poravnava vzdolž glavne osi prav tako pomembna. Tehnologija Flexbox ti omogoča različne možnosti za prilagajanje in prilagajanje poravnave tvojih elementov. Poglejmo si podrobneje!

Najpomembnejše ugotovitve

• Poravnavo v glavni osi dosežemo z lastnostjo justify-content.
• Lahko uporabiš različne vrednosti, kot so center, flex-start, flex-end, space-between in space-around, da prilagodiš svojo postavitev.
• Nastavitve Flexbox neposredno vplivajo na razporeditev elementov v želeni smeri.

Korak-po-korak navodila

1. Ustvari Flex-Container

Začni z ustvarjanjem Flex-Containerja in nastavitvijo njegove Fleks-smeri. V tem primeru nastavimo Fleks-smer na vrstico. To pomeni, da bodo elementi razporejeni od leve proti desni v vrsti.

2. Privzeta poravnava elementov

Če svoje elemente postaviš v kontejner brez posebnih prilagoditev sloga, boš videl, da so privzeto poravnani na začetku kontejnerja. Lahko jim dodeliš širino 100 slikovnih točk, da jih vizualno prikažeš.

3. Poravnava na sredini

Za poravnavo elementov na sredini uporabiš CSS lastnost justify-content z vrednostjo center. Tako bodo tvoji elementi poravnani v sredini kontejnerja, kar daje zelo privlačen razpored.

4. Poravnava elementov na koncu

Če želiš svoje elemente poravnati na koncu kontejnerja, lahko uporabiš vrednost flex-end za justify-content. Tako se bodo elementi premaknili na desni konec tvojega kontejnerja.

5. Poravnava elementov na začetku

Privzeto obnašanje brez prilagoditev je flex-start, kar pomeni, da elementi ostanejo na začetku kontejnerja. Ta nastavitev je koristna, če želiš jasno, urejeno postavitev elementov v zgornjem delu kontejnerja.

6. Sprememba Fleks-smeri

Če spremeniš Fleks-smer v stolpec, se glavna os spremeni iz vodoravne v navpično. Tako se elementi zdaj razvrstijo od zgoraj navzdol.

7. Poravnava elementov na sredini pri vertikalni poravnavi

V tej novi postavitvi lahko elemente enako poravnaš tudi tako, da uporabiš justify-content: center. Ta nastavitev poskrbi, da so vsi elementi prikazani v sredini kontejnerja.

8. Poravnava na spodnjem robu

Če želiš, da so elementi na spodnjem delu kontejnerja, lahko ponovno nastaviš flex-end. S tem se bodo elementi postavili na spodnji rob kontejnerja.

9. Uporaba lastnosti prostora (Space)

Flexbox ti omogoča tudi nadzorovanje prostora med svojimi elementi z uporabo lastnosti space-between, space-around in space-evenly. Te lastnosti razporejajo razpoložljiv prostor na različne načine.

10. Uporaba Space-Between

Z justify-content: space-between se prvi element postavi na vrh in zadnji element na dno kontejnerja, pri čemer je prostor med elementi enakomerno porazdeljen.

Preizkusi prostor okoli

Ko uporabljate space-around, se okoli vsakega elementa ustvari enako veliko prostora. Ta razdalja je vidna v središču vsebnika, medtem ko ostanejo elementi enakomerno porazdeljeni.

Uporaba prostora povsod

Z uporabo space-evenly se zagotovi, da je enakomerno prostora povsod med elementi in robom vsebnika.

Povzetek

V tej vadnici ste se naučili, kako lahko s pomočjo Flexboxa nastavite poravnavo v glavni osi. S pomočjo lastnosti justify-content lahko zelo prilagodljivo določite pozicioniranje svojih elementov. Spoznali ste tudi različne lastnosti, ki vam bodo pomagale doseči želeno postavitev. Uporabite ta znanja, da ustvarite privlačne in uporabnikom prijazne oblikovane!