Hogyan állíthatók be a flexbox tulajdonságok…

A konténerhez (az elemhez, amelyre display: flex vagy display: inline-flex van alkalmazva) és közvetlen leszármazottaihoz (a konténeren belüli elemekhez) tulajdonságokat rendelnek.

A konténer tulajdonságai:

display: Meghatározza, hogy az elem flex-konténer legyen. Lehetséges értékek: flex (blokk) és inline-flex (sor).
flex-direction: Meghatározza a fő tengely irányát, amely mentén a flex elemek elhelyezkednek. Lehetséges értékek: row (alapértelmezett, balról jobbra), row-reverse (jobbról balra), column (felülről lefelé), column-reverse (lentről felfelé).
flex-wrap: Kezeli a flex elemek törését új sorba, ha azok túlmennek a konténer határain. Lehetséges értékek: nowrap (alapértelmezett, törés nélkül), wrap (törés új sorba), wrap-reverse (fordított törés új sorba).
justify-content: Igazítja a flex elemeket a fő tengely mentén. Lehetséges értékek: flex-start (konténer kezdete), flex-end (konténer vége), center, space-between (egyenletes térköz a elemek között, az első a kezdőnél, az utolsó a végénél), space-around (egyenletes térköz minden elem körül).
align-items: Igazítja a flex elemeket a keresztirányú tengely mentén. Lehetséges értékek: stretch (alapértelmezett, az elemek magasságát a konténerhez igazítja), flex-start (kezdet), flex-end (vég), center, baseline (szöveg alapvonalához igazítva).
align-content: Igazítja a flex sorokat a keresztirányú tengely mentén (amikor flex-wrap van használatban). Csak akkor hat, ha több sor van. Lehetséges értékek: stretch, flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Meghatározza a távolságot a flex elemek között a fő és keresztirányú tengely mentén.

Az elemekhez (a flex konténer közvetlen leszármazottaihoz):

order: Meghatározza az elem elrendezési sorrendjét a konténerben. Alapértelmezettként minden elem order: 0. Az alacsonyabb értékű elemek korábban jelennek meg.
flex-grow: Meghatározza, hogy az elem mennyire növekedhet a többihez képest, ha van szabad hely. Alapértelmezett 0 (nem növekszik).
flex-shrink: Meghatározza, hogy az elem mennyire zsugorodhat, ha nincs elég hely. Alapértelmezett 1 (zsugorodik).
flex-basis: Meghatározza az elem kezdeti méretét a szabad hely elosztása előtt. Lehet pixelekben, százalékban vagy auto. Alapértelmezett auto.
flex: Rövidített tulajdonság a flex-grow, flex-shrink és flex-basis számára. Például, flex: 1 1 auto;.
align-self: Felülírja az align-items értékét az adott elemre. Lehetséges értékek: auto, stretch, flex-start, flex-end, center, baseline.

Példa:

.flex-container {
  display: flex; /* Flex konténer lesz az elem */
  flex-direction: row; /* Sorba rendezi az elemeket */
  justify-content: center; /* Középre igazítja az elemeket a fő tengely mentén */
  align-items: center; /* Középre igazítja az elemeket a keresztirányú tengely mentén */
  gap: 10px; /* Távolságot ad az elemek között */
}

.flex-item {
  flex-grow: 1; /* Az elem növekedhet */
  flex-basis: 100px; /* Kezdeti méret */
}

.special-item {
  order: -1; /* Ez az elem első lesz */
  align-self: flex-end; /* Felülírja az igazítást erre az elemre */
}

Hogyan állíthatók be a flexbox tulajdonságok?