Mit használ a flex a CSS-ben?

A Flexbox-t az elemek egydimenziós elrendezésének létrehozására használják egy tartályban. Lehetővé teszi az igazítást, a tér elosztását és az elemek sorrendjét.

Fő fogalmak:

• Flex tartály: Szülőelem, amelyhez display: flex vagy display: inline-flex van rendelve.
• Flex elemek: A Flex tartály gyermekelemei.
• Fő tengely: A Flex tartály fő tengelye. A flex-direction tulajdonsággal határozható meg. Alapértelmezettként vízszintes (row).
• Átlós tengely: A fő tengellyel merőleges tengely.

A Flex tartály fő tulajdonságai:

• display: Meghatározza, hogy az elem flex tartály-e (flex vagy inline-flex).
• flex-direction: A fő tengely irányát állítja be (row, row-reverse, column, column-reverse).
• justify-content: A flex elemek igazítása a fő tengely mentén (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: A flex elemek igazítása az átlós tengely mentén (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Meghatározza, hogy a flex elemek új sorba/oszlopba törjenek-e, ha nincs elég hely (nowrap, wrap, wrap-reverse).

Flex elemek fő tulajdonságai:

• order: A flex elem vizuális sorrendje (alapértelmezett 0).
• flex-grow: Meghatározza, hogy mennyire növekedhet egy flex elem a többihez képest (alapértelmezett 0).
• flex-shrink: Meghatározza, hogy mennyire csökkenhet egy flex elem a többihez képest (alapértelmezett 1).
• flex-basis: A flex elem kezdeti méretét határozza meg a szabad hely elosztása előtt (alapértelmezett auto).
• align-self: Felülírja a flex elem igazítását a átlós tengely mentén egy adott elem esetében.

Használati példa:

.container {
  display: flex;
  justify-content: center; /* Igazítás középre a fő tengely mentén */
  align-items: center; /* Igazítás középre a kereszt tengely mentén */
  height: 200px;
  border: 1px solid black;
}

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

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Ez lehetővé teszi az elemek könnyű középre helyezését, reszponzív rácsok létrehozását és a tér kezelését az elemek között.