Co je Flexbox?

Flexbox (Flexibilní rozložení boxů) je jednorozměrový model rozvržení v CSS, který je určen pro rozdělení místa mezi prvky v kontejneru a nabízí silné možnosti zarovnání. Umožňuje snadno řídit velikosti, pořadí a zarovnání dceřiných prvků (flex-prvků) uvnitř rodičovského kontejneru (flex-kontejner), bez ohledu na jejich původní pořadí nebo velikosti.

Hlavní koncepty Flexboxu:

• Flex-kontejner: Prvek s display: flex nebo display: inline-flex. V něm jsou stanoveny pravidla rozvržení pro jeho přímé děti.
• Flex-prvky: Přímé děti flex-kontejneru. Na ty se vztahují vlastnosti Flexboxu, které určují jejich chování uvnitř kontejneru.
• Hlavní osa (main axis): Osa, podél které jsou rozmístěny flex-prvky. Výchozí je horizontální (zleva doprava), ale může být změněna vlastností flex-direction.
• Křížová osa (cross axis): Osa kolmá na hlavní osu.
• Hlavní začátek (main start) / Hlavní konec (main end): Začátek a konec podél hlavní osy.
• Křížový začátek (cross start) / Křížový konec (cross end): Začátek a konec podél křížové osy.

Hlavní vlastnosti Flexboxu 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).
• flex-wrap: Určuje, zda se flex-prvky budou přenášet na nový řádek/sloupec, pokud není místo (nowrap, wrap, wrap-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).
• align-content: Zarovnává řádky flex-prvků (pokud jich je více kvůli flex-wrap) podél křížové osy.

Hlavní vlastnosti flex-prvků:

• order: Určuje pořadí zobrazení flex-prvku (výchozí 0).
• flex-grow: Koeficient růstu flex-prvku, který určuje, jak moc se může zvětšit, aby vyplnil dostupný prostor.
• flex-shrink: Koeficient zmenšení flex-prvku, který určuje, jak moc se může zmenšit, aby se zabránilo přetečení.
• flex-basis: Počáteční velikost flex-prvku před rozdělením volného prostoru.
• flex: Zkrácená forma pro flex-grow, flex-shrink a flex-basis.
• align-self: Přepisuje align-items pro konkrétní flex-prvek.

Příklad použití:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Dělá z kontejneru flex-kontejner */
  justify-content: center; /* Zarovnává prvky na střed hlavní osy */
  align-items: center; /* Zarovnává prvky na střed křížové osy */
  height: 200px; /* Pro demonstrační účely */
  border: 1px solid black;
}

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

Hlavní výhody Flexboxu:

• Snadné zarovnání prvků horizontálně i vertikálně.
• Flexibilní rozdělení prostoru mezi prvky.
• Snadná změna pořadí prvků.
• Responzivní design bez použití float a pozice.
• Dobrá podpora v moderních prohlížečích.