Mire szolgál a Flexbox?

A Flexbox a CSS-ben rugalmas és alkalmazkodó elrendezések létrehozására szolgál. Lehetővé teszi az elemek könnyű igazítását és elosztását a konténeren belül, automatikusan igazítva azok méretét és helyzetét a rendelkezésre álló térhez képest.

A Flexbox fő fogalmai:

• Flex konténer: Az elem, amelyre a display: flex; vagy display: inline-flex; van alkalmazva. Tartalmazza a flex elemeket.
• Flex elemek: A flex konténer közvetlen gyermekei.

A Flexbox lehetővé teszi:

• Az elemek elrendezési irányának (flex-direction) szabályozását.
• Az elemek sorba/oszlopba törését (flex-wrap).
• Az elemek igazítását a fő tengely mentén (justify-content).
• Az elemek igazítását a kereszt tengely mentén (align-items az egyes elemekhez és align-content több sor/oszlop esetén).
• Az elemek megjelenítési sorrendjének (order).
• A szabad hely elosztását az elemek között (flex-grow, flex-shrink, flex-basis).

Alapvető példák:

.konténer {
  display: flex;
  justify-content: center; /* Horizontális középre igazítás */
  align-items: center; /* Vertikális középre igazítás */
}

.elem {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="konténer">
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
</div>