Hogyan használjuk a flexboxot az elemek…

Flexbox (vagy Flexible Box Layout) egy CSS modul, amelyet arra terveztek, hogy rugalmas elrendezéseket hozzon létre az elemek számára egy konténeren belül, lehetővé téve a tér könnyű elosztását és az elemek igazítását, még akkor is, ha azok méretei ismeretlenek vagy dinamikusan változnak.

A Flexbox alapfogalma a flex-konténer és a flex-elemek.

Flex-konténer tulajdonságai (display: flex;):

flex-direction: meghatározza a flex-elemek elhelyezkedésének irányát (fő tengely).
- row (alapértelmezett): vízszintes, balról jobbra.
- row-reverse: vízszintes, jobbról balra.
- column: függőleges, felülről lefelé.
- column-reverse: függőleges, alulról felfelé.
flex-wrap: meghatározza, hogy a flex-elemek új sorba kerülnek-e, ha nem férnek el egy sorban.
- nowrap (alapértelmezett): minden elem egy sorban.
- wrap: új sorba kerül.
- wrap-reverse: új sorba kerül, de fordított sorrendben.
justify-content: igazítja a flex-elemeket a fő tengely mentén.
- flex-start (alapértelmezett): a fő tengely elején.
- flex-end: a fő tengely végén.
- center: középen.
- space-between: egyenlő elosztás, térközökkel az elemek között.
- space-around: egyenlő elosztás, térközökkel az elemek körül.
- space-evenly: egyenlő elosztás, az elemek között és körül.
align-items: igazítja az elemeket a keresztirányú tengely mentén.
- stretch (alapértelmezett, ha az elemeknek nincs megadva magasság/szélesség): az elemek kitöltik a keresztirányú tengelyt.
- flex-start: az elemek a kezdőpontban.
- flex-end: a végpontban.
- center: középen.
- baseline: a szöveg alapvonalán.
align-content: a flex sorokat igazítja a keresztirányú tengely mentén, ha több sor van (flex-wrap: wrap). Hasonló a justify-content-hez, de sorokra.
- stretch (alapértelmezett): a sorokat kitölti.
- flex-start: a kezdőpontban.
- flex-end: a végpontban.
- center: középen.
- space-between: egyenlő elosztás, térközökkel a sorok között.
- space-around: egyenlő elosztás, térközökkel a sorok körül.
gap, row-gap, column-gap: meghatározza a térközöket a flex elemek között.

.flex-container {
  display: flex; /* Flex konténer létrehozása */
  flex-direction: row; /* Vízszintes elrendezés */
  flex-wrap: wrap; /* Új sorba törés */
  justify-content: center; /* Középre igazítás */
  align-items: center; /* Függőleges igazítás */
  gap: 10px; /* 10px térköz */
}

Flex-elemek tulajdonságai (a flex-konténer közvetlen gyermekei):

order: meghatározza az elem megjelenítési sorrendjét (alapértelmezett 0). A kisebb érték korábban jelenik meg.
flex-grow: meghatározza, hogy az elem mennyire növekedhet a többihez képest, kihasználva a rendelkezésre álló helyet. Alapértelmezett 0.
flex-shrink: meghatározza, hogy az elem mennyire zsugorodhat, ha kevés a hely. Alapértelmezett 1.
flex-basis: az elem alapmérete, mielőtt a szabad helyet elosztanák. Lehet px, %, rem, auto stb. (alapértelmezett auto).
flex: rövid tulajdonság a flex-grow, flex-shrink, flex-basis-hez.
align-self: felülírja az align-items értékét az adott elemre. Ugyanazokat az értékeket veheti fel.

.flex-item {
  order: 2; /* Ez az elem második lesz */
  flex-grow: 1; /* Foglalja a maradék helyet */
  flex-shrink: 0; /* Nem zsugorodik */
  flex-basis: 100px; /* Alapméret 100px */
  align-self: flex-start; /* Kezdeti igazítás */
}

.another-item {
  flex: 1 1 auto; /* grow: 1, shrink: 1, basis: auto */
}

A Flexbox lehetővé teszi különböző elrendezések létrehozását, az egyszerű igazításoktól a bonyolultabb, reszponzív struktúrákig, irányítva a tér elosztását és az elemek igazítását a konténeren belül.

Hogyan használjuk a flexboxot az elemek elrendezéséhez az oldalon?