Kam skirta flex CSS-те?

Flexbox naudojamas kuriant vienmatis išdėstymus elementų konteineryje. Jis leidžia valdyti išlyginimą, erdvės paskirstymą ir elementų tvarką.

Pagrindinės sąvokos:

• Flex Container: Tėvinis elementas, kuriam priskiriama display: flex arba display: inline-flex.
• Flex Items: Flex Container vaikų elementai.
• Main Axis: Pagrindinė Flex Container ašis. Nustatoma flex-direction savybe. Numatyta horizontali (row).
• Cross Axis: Šoninė ašis, statmena Main Axis.

Pagrindinės savybės Flex Container:

• display: Nustato, ar elementas yra flex konteineris (flex arba inline-flex).
• flex-direction: Nustato pagrindinės ašies kryptį (row, row-reverse, column, column-reverse).
• justify-content: Išlygina flex elementus pagal pagrindinę ašį (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Išlygina flex elementus pagal šonines ašis (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Nustato, ar flex elementai turi pereiti į naują eilutę arba stulpelį, jei vietos nepakanka (nowrap, wrap, wrap-reverse).

Pagrindinės savybės Flex Items:

• order: Nustato vizualų elementų tvarką (numatyta 0).
• flex-grow: Nustato, kiek elementas gali išaugti lyginant su kitais (0).
• flex-shrink: Nustato, kiek elementas gali sumažėti lyginant su kitais (1).
• flex-basis: Nustato pradinį elemento dydį prieš laisvos erdvės paskirstymą (auto).
• align-self: Perrašo individualaus elemento išlyginimą šoninėse ašyse.

Pavyzdys:

.container {
  display: flex;
  justify-content: center; /* Išlyginimas centre pagal pagrindinę ašį */
  align-items: center; /* Išlyginimas centre pagal šonines ašis */
  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>

Tai leidžia lengvai centruoti elementus, kurti prisitaikančias tinklelius ir valdyti tarp elementų esančią erdvę.