K čemu slouží Flexbox?

Flexbox se používá k vytváření flexibilních a responzivních rozvržení v CSS. Umožňuje snadno zarovnat a rozdělit prvky uvnitř kontejneru, přičemž jejich velikost a poloha se automaticky přizpůsobují dostupnému prostoru.

Hlavní koncepty Flexbox:

• Flex kontejner: Element, na který se aplikuje display: flex; nebo display: inline-flex;. Obsahuje flex prvky.
• Flex prvky: Přímí potomci flex kontejneru.

Flexbox umožňuje kontrolu nad:

• Směrem rozložení prvků (flex-direction).
• Přechodem prvků na další řádek/sloupec (flex-wrap).
• Zarovnáním prvků podél hlavní osy (justify-content).
• Zarovnáním prvků podél příčné osy (align-items pro jednotlivé prvky a align-content pro více řádků/sloupců).
• Pořadím zobrazení prvků (order).
• Rozdělením volného prostoru mezi prvky (flex-grow, flex-shrink, flex-basis).

Příklad základního použití:

.kontejner {
  display: flex;
  justify-content: center; /* Horizontální zarovnání na střed */
  align-items: center; /* Vertikální zarovnání na střed */
}

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

<div class="kontejner">
  <div class="prvek"></div>
  <div class="prvek"></div>
  <div class="prvek"></div>
</div>