Čo je Flexbox?

Flexbox (Flexibilný Box Layout) je jednorozmerný model rozloženia v CSS, ktorý je určený na rozdelenie miesta medzi prvkami v kontajneri a má mocné možnosti zarovnania. Umožňuje ľahko spravovať veľkosti, poradie a zarovnanie detských prvkov (flex-prvkov) vo vnútri rodičovského kontajnera (flex-kontajnera), nezávisle od ich pôvodného poradia alebo veľkostí.

Kľúčové koncepty Flexboxu:

• Flex-kontajner: Element s display: flex alebo display: inline-flex. V ňom sú stanovené pravidlá rozloženia pre jeho priame deti.
• Flex-prvky: Priame deti flex-kontajnera. Na ne sa aplikujú vlastnosti Flexboxu, ktoré určujú ich správanie vo vnútri kontajnera.
• Hlavná os (main axis): Os, pozdĺž ktorej sú rozmiestnené flex-prvky. Predvolene je horizontálna (zľava doprava), ale môže byť zmenená vlastnosťou flex-direction.
• Križová os (cross axis): Os, ktorá je kolmá na hlavnú os.
• Začiatok hlavnej osi (main start) / Koniec hlavnej osi (main end): Začiatok a koniec pozdĺž hlavnej osi.
• Začiatok križovej osi (cross start) / Koniec križovej osi (cross end): Začiatok a koniec pozdĺž križovej osi.

Hlavné vlastnosti Flexboxu pre flex-kontajner:

• display: Určuje, že prvok je flex-kontajner (flex alebo inline-flex).
• flex-direction: Určuje smer hlavnej osi (row, row-reverse, column, column-reverse).
• flex-wrap: Určuje, či sa flex-prvky budú prenášať na nový riadok/stĺpec, ak nie je miesto (nowrap, wrap, wrap-reverse).
• justify-content: Zarovnáva flex-prvky pozdĺž hlavnej osi (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Zarovnáva flex-prvky pozdĺž križovej osi (flex-start, flex-end, center, baseline, stretch).
• align-content: Zarovnáva riadky flex-prvkov (ak ich je viac kvôli flex-wrap) pozdĺž križovej osi.

Hlavné vlastnosti flex-prvkov:

• order: Určuje poradie zobrazenia flex-prvku (predvolené 0).
• flex-grow: Koeficient rastu flex-prvku, ktorý určuje, ako veľmi sa môže zväčšiť, aby vyplnil dostupný priestor.
• flex-shrink: Koeficient zmenšenia flex-prvku, ktorý určuje, ako veľmi sa môže zmenšiť, aby sa zabránilo pretečeniu.
• flex-basis: Počiatočná veľkosť flex-prvku pred rozdelením voľného priestoru.
• flex: Skrátená forma pre flex-grow, flex-shrink a flex-basis.
• align-self: Prepíše align-items pre konkrétny flex-prvok.

Príklad použitia:

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; /* Robí z kontajnera flex-kontajner */
  justify-content: center; /* Zarovnáva prvky na stred hlavnej osi */
  align-items: center; /* Zarovnáva prvky na stred križovej osi */
  height: 200px; /* Pre demonštráciu zarovnania */
  border: 1px solid black;
}

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

Hlavné výhody Flexboxu:

• Jednoduché zarovnanie prvkov horizontálne aj vertikálne.
• Flexibilné rozdelenie priestoru medzi prvkami.
• Jednoduchá zmena poradia prvkov.
• Responzívny dizajn bez použitia float a pozície.
• Dobrá podpora v moderných prehliadačoch.