Mi az a Flexbox?

A Flexbox (Rugalmas doboz elrendezés) egy egydimenziós elrendezési modell a CSS-ben, amelyet a hely elosztására a konténerben lévő elemek között és erőteljes igazítási lehetőségek biztosítására terveztek. Lehetővé teszi a gyermekelemek (flex-elemek) méreteinek, sorrendjének és igazításának könnyű kezelését a szülőkonténeren belül (flex-konténer), függetlenül azok eredeti sorrendjétől vagy méretétől.

A Flexbox fő fogalmai:

• Flex-konténer: Olyan elem, amelyre display: flex vagy display: inline-flex van beállítva. Ebben határozzuk meg a layout szabályokat a közvetlen gyermekelemek számára.
• Flex-elemek: A flex-konténer közvetlen gyermekelemei. Ezekre a Flexbox tulajdonságokra alkalmazzuk, amelyek meghatározzák viselkedésüket a konténeren belül.
• Fő tengely (main axis): Az a tengely, amely mentén a flex-elemek elhelyezkednek. Alapértelmezés szerint vízszintes (balról jobbra), de a flex-direction tulajdonsággal módosítható.
• Átlós tengely (cross axis): A fő tengellyel merőleges tengely.
• Fő kezdőpont (main start) / Fő végpont (main end): A fő tengely mentén a kezdő és végpont.
• Átlós kezdőpont (cross start) / Átlós végpont (cross end): Az átlós tengely mentén a kezdő és végpont.

A Flexbox fő tulajdonságai a flex-konténer számára:

• display: Meghatározza, hogy az elem flex-konténer legyen (flex vagy inline-flex).
• flex-direction: Meghatározza a fő tengely irányát (row, row-reverse, column, column-reverse).
• flex-wrap: Meghatározza, hogy a flex-elemek új sorba/oszlopba kerüljenek-e, ha nincs elég hely (nowrap, wrap, wrap-reverse).
• justify-content: Igazítja a flex-elemeket a fő tengely mentén (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Igazítja a flex-elemeket a kereszt tengely mentén (flex-start, flex-end, center, baseline, stretch).
• align-content: Igazítja a flex-elemek sorait (ha több sor van a flex-wrap miatt) a kereszt tengely mentén.

A flex-elemek fő tulajdonságai:

• order: Meghatározza a flex-elem megjelenítési sorrendjét (alapértelmezett 0).
• flex-grow: A flex-elem növekedési aránya, amely meghatározza, hogy mennyire növekedhet a rendelkezésre álló hely kitöltésére.
• flex-shrink: A flex-elem összehúzódási aránya, amely meghatározza, hogy mennyire csökkenthető a túlcsordulás elkerülése érdekében.
• flex-basis: A flex-elem kezdeti mérete a szabad hely elosztása előtt.
• flex: Rövidítés a flex-grow, flex-shrink és flex-basis számára.
• align-self: Felülírja az align-items értékét az adott flex-elemre.

Használati példa:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Flex-konténerként működteti az elemet */
  justify-content: center; /* A fő tengely mentén középre igazítja az elemeket */
  align-items: center; /* A kereszt tengely mentén középre igazítja az elemeket */
  height: 200px; /* A igazítás bemutatására */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

A Flexbox fő előnyei:

• Egyszerű elemek vízszintes és függőleges igazítása.
• Rugalmas helymegosztás az elemek között.
• Az elemek sorrendjének könnyű módosítása.
• Reszponzív dizájn float és pozíció használata nélkül.
• Jó támogatás a modern böngészőkben.