Mi az a Flexbox?

Flexbox (Rugalmas Doboz Elrendezés) egy CSS-modul, amely összetett és alkalmazkodóképes elrendezések létrehozására szolgál. Lehetővé teszi a konténer elemek közötti elrendezés, igazítás és térköz elosztásának kezelését, még akkor is, ha azok méretei ismeretlenek vagy dinamikusak.

A Flexbox fő fogalmai:

• Fő tengely (main axis): Az az tengely, amely mentén az elemek elhelyezkednek. Alapértelmezés szerint vízszintes (balról jobbra).
• Átlós tengely (cross axis): A fő tengellyel merőleges tengely. Alapértelmezés szerint függőleges (felülről lefelé).
• Kontejner (flex container): Az elem, amelyre a Flexbox tulajdonságokat alkalmazzuk (display: flex vagy display: inline-flex).
• Elemek (flex items): A konténer gyermek elemei.

Flex konténer tulajdonságai:

• display: 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 az elemek új sorba kerülnek-e (nowrap, wrap, wrap-reverse)
• justify-content: Az elemek igazítása a fő tengely mentén (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: Az elemek igazítása a kereszt tengely mentén (flex-start, flex-end, center, baseline, stretch)
• align-content: A sorok vagy oszlopok igazítása a kereszt tengely mentén több soros konténerben (flex-start, flex-end, center, space-between, space-around, stretch)

Flex elemek tulajdonságai:

• order: Meghatározza az elem sorrendjét a konténerben
• flex-grow: Meghatározza, hogy az elem mennyire növekedjen a rendelkezésre álló tér kitöltéséhez
• flex-shrink: Meghatározza, hogy az elem mennyire zsugorodjon, ha nincs elég hely
• flex-basis: Meghatározza az elem kezdeti méretét a tér elosztása előtt
• flex: Rövidítés a flex-grow, flex-shrink és flex-basis tulajdonságokra
• align-self: Felülírja az elem igazítását a kereszt tengely mentén (flex-start, flex-end, center, baseline, stretch, auto)

Használati példa:

/* Konténer */
.container {
  display: flex; /* Flexbox aktiválása */
  flex-direction: row; /* Sorban elrendezés */
  justify-content: center; /* Horizontális középre igazítás */
  align-items: center; /* Vertikális középre igazítás */
  height: 200px; /* Konténer magassága */
  border: 1px solid black;
}

/* Elemek */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

A Flexbox jelentősen megkönnyíti az alkalmazkodóképes elrendezések létrehozását a hagyományos módszerekhez képest (float, inline-block, table).