Kako koristiti flexbox za raspored elemenata na…

Flexbox (ili Flexible Box Layout) — to je CSS modul namenjen za ustvarjanje prilagodljivih postavitev elementov v vsebniku, omogočajoč enostavno razporejanje prostora in poravnavo elementov, tudi kadar so njihovi dimenziji neznani ali se dinamično spreminjajo.

Glavna koncept Flexbox je flex-vsebnik in njegovi flex- elementi.

Lastnosti za Flex-vsebnik (display: flex;):

flex-direction: Določa smer razporeditve flex- elementov v vsebniku (glavna os).
- row (privzeto): horizontalno, od leve proti desni.
- row-reverse: horizontalno, od desne proti levi.
- column: vertikalno, od zgoraj navzdol.
- column-reverse: vertikalno, od spodaj navzgor.
flex-wrap: Določa, ali se flex- elementi prelivajo v novo vrstico, če se ne prilegajo v eno.
- nowrap (privzeto): vsi elementi v eni vrstici.
- wrap: prelivajo se v novo vrstico.
- wrap-reverse: prelivajo se v novo vrstico, vendar v obratnem vrstnem redu.
justify-content: Poravnava flex- elementov vzdolž glavne osi.
- flex-start (privzeto): na začetku glavne osi.
- flex-end: na koncu glavne osi.
- center: na sredini glavne osi.
- space-between: enakomerno razporejeno z razmikom med elementi.
- space-around: enakomerno razporejeno z razmikom okoli elementov.
- space-evenly: enakomerno razporejeno z enakimi razmiki med in okoli elementov.
align-items: Poravnava flex- elementov vzdolž prečne osi.
- stretch (privzeto, če ni določena višina/širina): raztegne elemente po višini/širini prečne osi.
- flex-start: na začetku prečne osi.
- flex-end: na koncu prečne osi.
- center: na sredini prečne osi.
- baseline: po osnovni črti besedila.
align-content: Poravnava vrstic flex- elementov vzdolž prečne osi, ko pride do prelivanja vrstic (flex-wrap: wrap). Podobno kot justify-content, vendar za prečno os.
- stretch (privzeto): raztegne vrstice.
- flex-start: na začetku prečne osi.
- flex-end: na koncu prečne osi.
- center: na sredini prečne osi.
- space-between: enakomerno razporejene vrstice z razmiki med njimi.
- space-around: enakomerno razporejene vrstice z razmiki okoli njih.
gap, row-gap, column-gap: določajo razmike med flex- elementi.

.flex-container {
  display: flex; /* Ustvari flex-vsebnik */
  flex-direction: row; /* Elementi so razporejeni horizontalno */
  flex-wrap: wrap; /* Elementi se prelivajo v novo vrstico */
  justify-content: center; /* Elementi so poravnani na sredino glavne osi */
  align-items: center; /* Elementi so poravnani na sredino prečne osi */
  gap: 10px; /* Razmik 10px med flex- elementi */
}

Lastnosti za Flex- elemente (direktni potomci flex-vsebnik):

order: Določa vrstni red prikaza flex- elementa (privzeto 0). Manjše vrednosti se prikažejo prej.
flex-grow: Določa koeficient za raztezanje elementa glede na druge, da zavzame razpoložljiv prostor. Privzeto 0.
flex-shrink: Določa koeficient za krčenje, če je prostora premalo. Privzeto 1.
flex-basis: Določa osnovno velikost elementa pred razporejanjem prostega prostora. Lahko je v px, %, rem, auto itd. (privzeto auto).
flex: Skrčena lastnost za flex-grow, flex-shrink, flex-basis (npr. flex: 1 1 0;).
align-self: Prekoračuje poravnavo elementa vzdolž prečne osi, določeno z align-items na vsebniku. Sprejema iste vrednosti.

.flex-item {
  order: 2; /* Ta element bo prikazan kot drugi, ne glede na njegovo pozicijo v HTML */
  flex-grow: 1; /* Ta element bo zavzel preostali prostor */
  flex-shrink: 0; /* Ta element se ne bo krčil */
  flex-basis: 100px; /* Osnovna velikost 100px */
  align-self: flex-start; /* Poravnava tega elementa na začetek prečne osi */
}

.another-item {
  flex: 1 1 auto; /* Skrčena oblika: rast: 1, krčenje: 1, osnova: auto */
}

Flexbox omogoča ustvarjanje različnih postavitev, od preprostega poravnavanja do bolj zapletenih odzivnih struktur, upravljajoč razporeditev prostora in poravnavo elementov znotraj vsebnika.

Kako koristiti flexbox za raspored elemenata na stranici?