Mis on Flexbox?

Flexbox (Lõtv kastide paigutus) on ühemeetriline CSS-i mudel, mis on mõeldud ruumi jaotamiseks konteineris olevate elementide vahel ning millel on võimsad joondamisvõimalused. See võimaldab hõlpsasti hallata suurusi, järjekorda ja joondamist lapselementidel (flex-elemendid) vanemkonteineris (flex-konteiner), sõltumata nende algsest järjekorrast või suurusest.

Flexboxi põhikonceptsioonid:

• Flex-konteiner: element, millele on määratud display: flex või display: inline-flex. Just selles konteineris määratakse paigutuse reeglid selle otsealluvatele elementidele.
• Flex-elemendid: otse flex-konteinerile kuuluvad lapsed. Neile rakenduvad Flexboxi omadused, mis määravad nende käitumise konteineris.
• Põhjoon (main axis): joon, mille järgi paigutatakse flex-elemendid. Tavaliselt horisontaalne (vasakult paremale), kuid võib muuta flex-direction-iga.
• Ristjoon (cross axis): joon, mis on risti põhjoonega.
• Põhja algus (main start) / Põhja lõpp (main end): algus ja lõpp põhjoone suunas.
• Ristjoone algus (cross start) / Ristjoone lõpp (cross end): algus ja lõpp ristjoone suunas.

Flexboxi põhifunktsioonid flex-konteinerile:

• display: määrab, et element on flex-konteiner (flex või inline-flex).
• flex-direction: määrab põhjoone suuna (row, row-reverse, column, column-reverse).
• flex-wrap: määrab, kas flex-elemendid murravad uuele reale/veergu, kui ruumi ei jätku (nowrap, wrap, wrap-reverse).
• justify-content: joondab flex-elemendid põhjoone suunas (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: joondab flex-elemendid ristjoone suunas (flex-start, flex-end, center, baseline, stretch).
• align-content: joondab flex-elemendiliine (kui neid on mitu) ristjoone suunas.

Flex-elemendid põhifunktsioonid:

• order: määrab flex-elemendi kuvamise järjekorra (vaikimisi 0).
• flex-grow: kasvukordaja, mis määrab, kui palju element võib suureneda, et täita saadaval olev ruum.
• flex-shrink: kokkusurutavuse koefitsient, mis määrab, kui palju element võib vähendada, et vältida ülevoogu.
• flex-basis: algsuurus enne vaba ruumi jaotamist.
• flex: lühike vorm flex-grow, flex-shrink ja flex-basis jaoks.
• align-self: üle kirjutab align-items konkreetsele flex-elemendile.

Näide kasutamiseks:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Muudab konteineri flex-konteineriks */
  justify-content: center; /* Joondab elemendid keskjoonele põhjoones */
  align-items: center; /* Joondab elemendid keskjoonele ristjoones */
  height: 200px; /* Näituse eesmärgil joondamine */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Flexboxi peamised eelised:

• Mugav elementide joondamine horisontaalselt ja vertikaalselt.
• Paindlik ruumi jaotus elementide vahel.
• Elementide järjekorra lihtne muutmine.
• Reageeriv disain ilma float ja positsioneerimise kasutamiseta.
• Hea toetatus kaasaegsetes brauserites.