Kako podesiti svojstva flexbox-a?

Svojstva se postavljaju za kontejner (element na koji se primenjuje display: flex ili display: inline-flex) i njegove direktne potomke (elemente unutar kontejnera).

Svojstva za kontejner:

• display: Određuje da je element flex kontejner. Moguće vrednosti: flex (blok) i inline-flex (red).
• flex-direction: Određuje pravac glavne ose, duž koje se raspoređuju flex elementi. Moguće vrednosti: row (podrazumevano, od leva ka desno), row-reverse (od desna ka levo), column (odozgo nadole), column-reverse (odozdo nagore).
• flex-wrap: Upravlja prelamanjem flex elemenata u novi red ako pređu granice kontejnera. Moguće vrednosti: nowrap (podrazumevano, bez prelamanja), wrap (prelamanje u novi red), wrap-reverse (prelamanje u obrnutom pravcu).
• justify-content: Poravnava flex elemente duž glavne ose. Moguće vrednosti: flex-start (početak kontejnera), flex-end (kraj kontejnera), center, space-between (ravnomerno raspoređeni razmaci između elemenata, prvi na početku, poslednji na kraju), space-around (ravnomerno raspoređeni razmaci oko svakog elementa).
• align-items: Poravnava flex elemente duž poprečne ose. Moguće vrednosti: stretch (podrazumevano, rasteže elemente po visini kontejnera), flex-start (početak), flex-end (kraj), center, baseline (poravnanje po osnovnoj liniji teksta).
• align-content: Poravnava redove flex elemenata duž poprečne ose (kada se koristi flex-wrap). Ne važi ako postoji samo jedan red. Moguće vrednosti: stretch, flex-start, flex-end, center, space-between, space-around.
• gap, row-gap, column-gap: Određuju razmak između flex elemenata duž glavne i poprečne ose.

Svojstva za elemente (direktne potomke flex kontejnera):

• order: Određuje redosled postavljanja elementa unutar kontejnera. Podrazumevano, svi elementi imaju order: 0. Elementi sa manjom vrednošću order se postavljaju ranije.
• flex-grow: Određuje koliko puta se element može povećati u odnosu na druge elemente ako postoji slobodan prostor. Podrazumevano 0 (ne povećava se).
• flex-shrink: Određuje koliko puta se element može smanjiti ako nema dovoljno prostora. Podrazumevano 1 (smanjuje se).
• flex-basis: Određuje početnu veličinu elementa pre raspodele slobodnog prostora. Može biti u pikselima, procentima ili auto. Podrazumevano auto.
• flex: Skraćena svojstvo za flex-grow, flex-shrink i flex-basis. Na primer, flex: 1 1 auto;.
• align-self: Prepisuje vrednost align-items za taj konkretni element. Moguće vrednosti: auto, stretch, flex-start, flex-end, center, baseline.

Primer:

.flex-container {
  display: flex; /* Čini element flex kontejnerom */
  flex-direction: row; /* Raspoređuje elemente u red */
  justify-content: center; /* Poravnava elemente na sredinu glavne ose */
  align-items: center; /* Poravnava elemente na sredinu poprečne ose */
  gap: 10px; /* Postavlja razmak između elemenata */
}

.flex-item {
  flex-grow: 1; /* Element može da se poveća */
  flex-basis: 100px; /* Početna veličina elementa */
}

.special-item {
  order: -1; /* Ovaj element će biti prvi */
  align-self: flex-end; /* Prepisuje poravnanje za ovaj element */
}