Na čo sa používa flex v CSS?

Flexbox sa používá na vytváranie jednorozmerných rozložení prvkov v kontajneri. Umožňuje riadiť zarovnanie, rozloženie priestoru a poradie prvkov.

Hlavné pojmy:

• Flex Container: Rodičovský prvok, ktorému sa priraďuje display: flex alebo display: inline-flex.
• Flex Items: Detské prvky Flex Containeru.
• Main Axis: Hlavná os Flex Containeru. Určuje sa vlastnosťou flex-direction. Predvolene je horizontálna (row).
• Cross Axis: Vedľajšia os, kolmá na Main Axis.

Kľúčové vlastnosti pre Flex Container:

• display: Určuje, či je prvok flex-kontajner (flex alebo inline-flex).
• flex-direction: Nastavuje smer hlavnej osi (row, row-reverse, column, column-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ĺž vedľajšej osi (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Určuje, či sa flex prvky majú presúvať na nový riadok/stĺpec pri nedostatku miesta (nowrap, wrap, wrap-reverse).

Kľúčové vlastnosti pre Flex Items:

• order: Určuje vizuálne poradie flex prvku (predvolene 0).
• flex-grow: Určuje, do akej miery sa flex prvok môže zväčšiť v porovnaní s ostatnými (predvolene 0).
• flex-shrink: Určuje, do akej miery sa flex prvok môže zmenšiť v porovnaní s ostatnými (predvolene 1).
• flex-basis: Určuje počiatočnú veľkosť flex prvku pred rozdelením voľného priestoru (predvolene auto).
• align-self: Prekryje zarovnanie flex prvku pozdĺž vedľajšej osi pre jednotlivý prvok.

Príklad použitia:

.container {
  display: flex;
  justify-content: center; /* Zarovnanie na stred pozdĺž hlavnej osi */
  align-items: center; /* Zarovnanie na stred pozdĺž vedľajšej osi */
  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>

Toto umožňuje ľahko centrovať prvky, vytvárať adaptívne mriežky a riadiť priestor medzi prvkami.