Čo je Flexbox?

Flexbox (Flexibilný rozloženie boxu) — je modul CSS určený na vytváranie zložitých a responzívnych rozložení. Umožňuje riadiť usporiadanie, zarovnanie a rozdelenie priestoru medzi prvkami kontajnera, aj keď ich rozmery sú neznáme alebo dynamické.

Hlavné koncepty Flexboxu:

• Hlavná os (main axis): Os, po ktorej sa rozmiestňujú prvky. Predvolene je horizontálna (zľava doprava).
• Prečná os (cross axis): Os, ktorá je kolmá na hlavnú os. Predvolene je vertikálna (zhora nadol).
• Kontajner (flex container): Element, na ktorý sa aplikujú vlastnosti Flexboxu (display: flex alebo display: inline-flex).
• Prvky (flex items): Dcérové prvky kontajnera.

Vlastnosti pre Flex-kontajner:

• display: flex alebo inline-flex
• flex-direction: Určuje smer hlavnej osi (row, row-reverse, column, column-reverse)
• flex-wrap: Určuje, či sa prvky budú presúvať na nový riadok (nowrap, wrap, wrap-reverse)
• justify-content: Zarovnanie prvkov pozdĺž hlavnej osi (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: Zarovnanie prvkov pozdĺž prečnej osi (flex-start, flex-end, center, baseline, stretch)
• align-content: Zarovnanie riadkov alebo stĺpcov pozdĺž prečnej osi v viacriadkovom kontajneri (flex-start, flex-end, center, space-between, space-around, stretch)

Vlastnosti pre Flex prvky:

• order: Určuje poradie prvku v kontajneri
• flex-grow: Určuje, o koľko sa má prvok zväčšiť, aby zaplnil dostupný priestor
• flex-shrink: Určuje, o koľko sa má prvok zmenšiť, ak nie je dostatok miesta
• flex-basis: Určuje počiatočnú veľkosť prvku pred rozdelením priestoru
• flex: Skrátené vlastnosti pre flex-grow, flex-shrink a flex-basis
• align-self: Prepíše zarovnanie prvku pozdĺž prečnej osi (flex-start, flex-end, center, baseline, stretch, auto)

Príklad použitia:

/* Kontajner */
.container {
  display: flex; /* Zapína flexbox */
  flex-direction: row; /* Prvky sa rozmiestňujú v riadku */
  justify-content: center; /* Zarovnanie na stred horizontálne */
  align-items: center; /* Zarovnanie na stred vertikálne */
  height: 200px; /* Nastavuje výšku kontajnera */
  border: 1px solid black;
}

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

Flexbox výrazne uľahčuje tvorbu responzívnych rozložení v porovnaní s tradičnými metódami (float, inline-block, table).