Milleks kasutatakse Flexboxi?

Flexbox CSS-is kasutatakse paindlike ja reageerivate paigutuste loomiseks. See võimaldab lihtsasti joondada ja jaotada elemente konteineris, automaatselt kohandades nende suurust ja asukohta vastavalt saadaval olevale ruumile.

Flexboxi põhikonceptsioonid:

• Flex konteiner: Element, millele rakendatakse display: flex; või display: inline-flex;. See sisaldab flex-elemente.
• Flex elemendid: Otse flex konteineri lapsed.

Flexbox võimaldab kontrollida:

• Elementide paigutuse suunda (flex-direction).
• Elementide üleminekut järgmisele reale/veergu (flex-wrap).
• Elementide joondamist peamise telje suhtes (justify-content).
• Elementide joondamist risti telje suhtes (align-items ja align-content).
• Elementide kuvamise järjekorda (order).
• Vaba ruumi jaotust elementide vahel (flex-grow, flex-shrink, flex-basis).

Põhikasutuse näide:

.konteiner {
  display: flex;
  justify-content: center; /* Horisontaalne keskjoondus */
  align-items: center; /* Vertikaalne keskjoondus */
}

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

<div class="konteiner">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>