Milleks kasutatakse flex CSS-is?

Flexbox kasutatakse ühepoolsete elementide paigutuse loomiseks konteineris. See võimaldab hallata joondust, ruumi ja elementide järjekorda.

Põhiteadmised:

• Flex Container: Vanemelement, millele omistatakse display: flex või display: inline-flex.
• Flex Items: Flex Container'i lapsed.
• Main Axis: Peamine telg Flex Container'is. Määratakse flex-direction omadusega. Vaikimisi horisontaalne (row).
• Cross Axis: Külg telg, risti Main Axis'iga.

Peamised omadused Flex Container'ile:

• display: Määrab, kas element on flex-konteiner (flex või inline-flex).
• flex-direction: Määrab peamise telje suuna (row, row-reverse, column, column-reverse).
• justify-content: Joondab flex-elemente peamise telje järgi (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Joondab flex-elemente külg telje järgi (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Määrab, kas flex-elementid peavad uuele reale või veerisele üle minema, kui ruumi ei jätku (nowrap, wrap, wrap-reverse).

Peamised omadused Flex Items'ile:

• order: Määrab visuaalse järjekorra (vaikimisi 0).
• flex-grow: Määrab, kui palju element võib kasvada võrreldes teistega (0).
• flex-shrink: Määrab, kui palju element võib väheneda võrreldes teistega (1).
• flex-basis: Määrab algse suuruse enne vaba ruumi jaotamist (auto).
• align-self: Üle kirjutab üksiku elemendi joondamise külg telje järgi.

Näide:

.container {
  display: flex;
  justify-content: center; /* Joondus keskpunkti peamise telje järgi */
  align-items: center; /* Joondus keskpunkti külg telje järgi */
  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>

See võimaldab lihtsasti elemente keskpunkti paigutada, luua kohandatavaid võrgustikke ja hallata ruumi elementide vahel.