Kas yra Flexbox?

„Flexbox“ (Lankstių dėžių išdėstymas) — tai CSS modulis, skirtas sudėtingiems ir adaptuojamiems išdėstymams kurti. Jis leidžia valdyti elementų išdėstymą, lygiavimą ir erdvės paskirstymą tarp konteinerio elementų, net jei jų dydžiai yra nežinomi arba dinamiški.

Pagrindinės Flexbox koncepcijos:

• Pagrindinė ašis (main axis): ašis, pagal kurią išsidėsto elementai. Pagal numatytuosius nustatymus ji yra horizontali (iš kairės į dešinę).
• Perkirtinė ašis (cross axis): ašis, statmena pagrindinei ašiai. Pagal numatytuosius nustatymus ji yra vertikali (iš viršaus į apačią).
• Konteineris (flex container): elementas, kuriam taikomi Flexbox savybės (display: flex arba display: inline-flex).
• Elementai (flex items): vaiko elementai konteineryje.

Flex konteinerio savybės:

• display: flex arba inline-flex
• flex-direction: nurodo pagrindinės ašies kryptį (row, row-reverse, column, column-reverse)
• flex-wrap: nurodo, ar elementai pereis į naują eilutę (nowrap, wrap, wrap-reverse)
• justify-content: išlygiavimas pagal pagrindinę ašį (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: išlygiavimas pagal perkirtinę ašį (flex-start, flex-end, center, baseline, stretch)
• align-content: eilutės arba stulpeliai išlygiavimas pagal perkirtinę ašį daugiasluoksniame konteineryje (flex-start, flex-end, center, space-between, space-around, stretch)

Flex elementų savybės:

• order: elementų tvarka konteineryje
• flex-grow: kiek elementas turi išaugti, kad užimtų prieinamą erdvę
• flex-shrink: kiek elementas turi susitraukti, jei vietos nepakanka
• flex-basis: pradinė elemento dydžio reikšmė prieš erdvės paskirstymą
• flex: trumpa savybė flex-grow, flex-shrink ir flex-basis
• align-self: atšaukia align-items nustatymą individualiai elementui (flex-start, flex-end, center, baseline, stretch, auto)

Pavyzdys:

/* Konteineris */
.container {
  display: flex; /* Įjungia flexbox */
  flex-direction: row; /* Elementai išdėstomi eilute */
  justify-content: center; /* Horizontaliai išlygiama į centrą */
  align-items: center; /* Vertikaliai išlygiama į centrą */
  height: 200px; /* Konteinerio aukštis */
  border: 1px solid black;
}

/* Elementai */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox žymiai palengvina adaptuojamų išdėstymų kūrimą, palyginti su tradiciniais metodais (float, inline-block, table).