Kam naudojamas Flexbox?

„Flexbox“ naudojamas kuriant lankstesnius ir prisitaikančius CSS maketus. Jis leidžia lengvai išlyginti ir paskirstyti elementus konteineryje, automatiškai reguliuojant jų dydį ir padėtį priklausomai nuo turimo vietos.

Pagrindinės „Flexbox“ sąvokos:

• Flex konteineris: Elementas, kuriam taikomas display: flex; arba display: inline-flex;. Jis apima flex elementus.
• Flex elementai: Tiesioginiai flex konteinerio vaikai.

„Flexbox“ leidžia kontroliuoti:

• Elementų išdėstymo kryptį (flex-direction).
• Elementų perėjimą į kitą eilutę/stulpelį (flex-wrap).
• Elementų išlyginimą pagrindiniu ašimi (justify-content).
• Elementų išlyginimą skersine ašimi (align-items ir align-content).
• Elementų rodymo tvarką (order).
• Laisvos vietos paskirstymą tarp elementų (flex-grow, flex-shrink, flex-basis).

Pagrindinis naudojimo pavyzdys:

.konteineris {
  display: flex;
  justify-content: center; /* Horizontaliai išlyginti centrą */
  align-items: center; /* Vertikaliai išlyginti centrą */
}

.elementas {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="konteineris">
  <div class="elementas"></div>
  <div class="elementas"></div>
  <div class="elementas"></div>
</div>