K čemu slouží flex v CSS?

Flexbox se používá k vytváření jednorozměrných uspořádání prvků v kontejneru. Umožňuje řídit zarovnání, rozložení prostoru a pořadí prvků.

Hlavní pojmy:

• Flex kontejner: Předek, kterému je přiřazena vlastnost display: flex nebo display: inline-flex.
• Flex prvky: Dětské prvky Flex kontejneru.
• Hlavní osa: Hlavní osa Flex kontejneru. Definuje se vlastností flex-direction. Výchozí je horizontální (row).
• Křížová osa: Osa kolmá na hlavní osu.

Klíčové vlastnosti pro Flex kontejner:

• display: Určuje, že prvek je flex kontejner (flex nebo inline-flex).
• flex-direction: Určuje směr hlavní osy (row, row-reverse, column, column-reverse).
• justify-content: Zarovnává flex prvky podél hlavní osy (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Zarovnává flex prvky podél křížové osy (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Určuje, zda se flex prvky mají zalamovat do nového řádku/sloupce, pokud není dost místa (nowrap, wrap, wrap-reverse).

Klíčové vlastnosti pro Flex prvky:

• order: Určuje vizuální pořadí flex prvku (výchozí 0).
• flex-grow: Určuje, jak moc může flex prvek růst ve srovnání s ostatními (výchozí 0).
• flex-shrink: Určuje, jak moc může flex prvek zmenšit ve srovnání s ostatními (výchozí 1).
• flex-basis: Určuje počáteční velikost flex prvku před rozdělením volného prostoru (výchozí auto).
• align-self: Přepisuje zarovnání flex prvku podél křížové osy pro konkrétní prvek.

Příklad použití:

.container {
  display: flex;
  justify-content: center; /* Zarovnání na střed podél hlavní osy */
  align-items: center; /* Zarovnání na střed podél křížové osy */
  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>

To umožňuje snadné centrování prvků, tvorbu responzivních mřížek a řízení prostoru mezi prvky.