Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Flex

Flexbox je sodoben sistem postavitve v eni dimenziji. Uporabljamo ga takrat, ko želimo elemente razporediti v vrstici ali stolpcu, jih poravnati po glavni in prečni osi ter jim po potrebi omogočiti rast, krčenje ali prelom v več vrstic.

Primeren je za menije, vrstice gumbov, kartice, poravnavo elementov na sredino in podobne postavitve. Za razporejanje po vrsticah in stolpcih hkrati pa je pogosto primernejši CSS Grid.

 

Pomni: Element z lastnostjo display: flex postane nadrejeni flex element, njegovi neposredni otroci pa postanejo flex elementi. Lastnosti, kot sta justify-content in align-items, določamo na nadrejenem flex elementu.

Flexbox je namenjen postavitvi v eni dimenziji. To pomeni, da razmišlja predvsem po eni glavni osi: vodoravno ali navpično. Zaradi tega je zelo uporaben za manjše in srednje zahtevne razporeditve elementov.

Osnovna pravila

  • Flexbox ureja elemente v eni dimenziji: v vrstici ali v stolpcu.
  • Glavno os določa lastnost flex-direction.
  • Poravnava po glavni osi se določa z lastnostjo justify-content.
  • Poravnava po prečni osi se določa z lastnostjo align-items.
  • Če zmanjka prostora, lahko z lastnostjo flex-wrap dovolimo prelom elementov.
  • Posameznim elementom lahko določimo tudi rast, krčenje, začetno velikost in vrstni red.

Pozor: Flex lastnosti praviloma vplivajo le na neposredne otroke nadrejenega flex elementa. Če je element globlje v strukturi HTML, se nanj obnašanje flex postavitve ne prenese samodejno.

Lastnost display: flex

Z lastnostjo display: flex vključimo flex postavitev. Neposredni otroci takega elementa se nato razporedijo kot flex elementi.

<div class="ovoj">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>
.ovoj {
   display: flex;
   gap: 10px;
}

.ovoj div {
   padding: 15px;
   background-color: #fccc88;
}
1
2
3

Če želimo, da se nadrejeni flex element obnaša kot vrstični element, lahko uporabimo tudi display: inline-flex.

Pomni: Lastnost display določa tudi način postavitve otrok elementa. Pri vrednosti flex otroci sodelujejo v flex postavitvi.

Lastnost flex-direction

Lastnost flex-direction določa smer glavne osi. Najpogosteje uporabljamo vrednosti row in column.

Vrednost Pomen
row elementi so razporejeni v vrstici
row-reverse elementi so v vrstici v obratnem vrstnem redu
column elementi so razporejeni v stolpcu
column-reverse elementi so v stolpcu v obratnem vrstnem redu 
.stolpec {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
1
2
3

Izbira smeri je zelo pomembna, ker vpliva tudi na pomen drugih lastnosti, na primer justify-content in align-items.

Lastnost flex-wrap

Lastnost flex-wrap določa, ali se lahko elementi prelomijo v novo vrstico ali stolpec, kadar zmanjka prostora.

Vrednost Pomen
nowrap elementi se ne prelamljajo
wrap elementi se lahko prelomijo
wrap-reverse elementi se prelamljajo v obratni smeri 
.prelom {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.prelom div {
   width: 120px;
   padding: 15px;
   background-color: #fccc88;
}
1
2
3
4
5

Pozor: Če je določeno flex-wrap: nowrap;, se elementi ne bodo prelomili, ampak se bodo skušali stisniti v eno vrstico ali stolpec. To lahko vpliva na berljivost in uporabnost postavitve.

Lastnost justify-content

Lastnost justify-content poravna elemente po glavni osi. Uporabna je za razporeditev prostega prostora med elementi ali okoli njih.

Vrednost Pomen
flex-start elementi so poravnani na začetek glavne osi
flex-end elementi so poravnani na konec glavne osi
center elementi so poravnani na sredino glavne osi
space-between prvi element je na začetku, zadnji na koncu, ostali pa enakomerno med njima
space-around okrog vsakega elementa je prostor, na robovih pa manjši
space-evenly razmiki med elementi in robovi so enaki 
.meni {
   display: flex;
   justify-content: space-between;
   gap: 10px;
}
Domov
Vodiči
Kontakt

Ta lastnost razporeja prosti prostor po glavni osi. Če elementi zaradi rasti zapolnijo ves prostor, učinek posameznih vrednosti ni vedno enako izrazit.

Lastnost align-items

Lastnost align-items poravna elemente po prečni osi. Uporabna je na primer pri navpičnem centriranju v vrstici ali pri poravnavi elementov na spodnji rob.

Vrednost Pomen
stretch elementi se raztegnejo po prečni osi
flex-start elementi so poravnani na začetek prečne osi
flex-end elementi so poravnani na konec prečne osi
center elementi so poravnani na sredino prečne osi
baseline elementi se poravnajo po osnovnici besedila 
.poravnava {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 120px;
   gap: 10px;
}
A
B
C
.spodaj {
   display: flex;
   align-items: flex-end;
   height: 120px;
   gap: 10px;
}
A
B
C

Pomni: Lastnost justify-content deluje po glavni osi, lastnost align-items pa po prečni osi. Katera os je katera, je odvisno od vrednosti flex-direction.

Lastnost gap

Lastnost gap določa razmik med flex elementi. Tako je postavitev preglednejša, saj razmikov ni treba določati z zunanjimi odmiki posameznih elementov.

.razmik {
   display: flex;
   gap: 20px;
}

.razmik div {
   padding: 15px;
   background-color: #fccc88;
}
1
2
3

Če navedemo eno vrednost, velja za obe smeri. Pri dveh vrednostih prva določa razmik med vrsticami, druga pa med stolpci.

Lastnosti posameznih elementov

Posameznim flex elementom lahko določimo tudi njihove lastnosti. Najpogostejše so:

  • flex-grow – določa, koliko naj element raste glede na ostale elemente,
  • flex-shrink – določa, koliko naj se element krči, kadar zmanjka prostora,
  • flex-basis – določa začetno velikost elementa po glavni osi,
  • flex – bližnjica za flex-grow, flex-shrink in flex-basis,
  • align-self – določa posebno poravnavo posameznega elementa,
  • order – spremeni vrstni red elementa.
.element1 { flex: 1; }
.element2 { flex: 2; }
.element3 { flex: 1; }
1
2
3

Bližnjica flex je zelo uporabna, ker v enem zapisu določi več povezanih nastavitev. Pri osnovnem razumevanju je dovolj, da si zapomnimo, da večja številka pri rasti pomeni večji delež prostega prostora.

Pozor: Lastnost order spremeni le prikazni vrstni red elementov, ne pa logičnega vrstnega reda v izvorni kodi. Zato jo uporabljamo premišljeno.

Primerjava: Flexbox in Grid

Sistem Najprimernejša uporaba
Flexbox postavitev v eni dimenziji, na primer vrstica menija, gumbi, kartice v eni smeri
Grid postavitev v dveh dimenzijah, torej po vrsticah in stolpcih hkrati

Flexbox je namenjen predvsem postavitvi v eni dimenziji. Za razporeditev po vrsticah in stolpcih hkrati je navadno primernejši CSS Grid.

Priporočila

  • Za manjše in srednje zahtevne postavitve v eni smeri uporabi Flexbox.
  • Najprej določi smer glavne osi z lastnostjo flex-direction.
  • Za razmike med elementi raje uporabi gap kot več ločenih zunanjih odmikov.
  • Kadar lahko zmanjka prostora, premisli o uporabi flex-wrap.
  • Za poravnavo vedno razmisli, ali želiš vplivati na glavno ali na prečno os.
  • Za bolj zapletene dvodimenzionalne mreže raje uporabi CSS Grid.

Pogoste napake

  • Lastnosti justify-content in align-items se zamenjujeta brez upoštevanja smeri glavne osi.
  • Predpostavlja se, da Flexbox samodejno rešuje vsako postavitev, tudi takrat, ko bi bil primernejši Grid.
  • Flex lastnosti se določajo na elementih, ki niso neposredni otroci nadrejenega flex elementa.
  • Uporablja se order, ne da bi bil premislek o preglednosti in logičnem vrstnem redu vsebine.
  • Postavitev ne dovoljuje preloma elementov, čeprav je prostora premalo.
  • Razmiki med elementi se urejajo z neenotnimi zunanjimi odmiki namesto z lastnostjo gap.
Nazaj
Naprej