Kas yra Flexbox?

„Flexbox“ (Lankstus dėžių išdėstymas) yra vienmatis maketo modelis CSS, skirtas paskirstyti vietą tarp elementų konteineryje ir turintis galingas išlyginimo galimybes. Jis leidžia lengvai valdyti dydžius, tvarką ir išlyginimą vaikų elementų (flex elementų) viduje tėvų konteineryje (flex konteineryje), nepriklausomai nuo jų pradinės tvarkos ar dydžių.

„Flexbox“ pagrindinės koncepcijos:

Flex konteineris: elementas, kuriam nustatyta display: flex arba display: inline-flex. Būtent šiame konteineryje nustatomos maketo taisyklės jo tiesioginiams vaikų elementams.
Flex elementai: tiesioginiai flex konteinerio vaikai. Jiems taikomos Flexbox savybės, apibrėžiančios jų elgesį konteineryje.
Pagrindinė ašis (main axis): ašis, pagal kurią išdėstyti flex elementai. Paprastai horizontali (iš kairės į dešinę), bet gali būti pakeista flex-direction savybe.
Perpindinė ašis (cross axis): ašis, statmena pagrindinei ašiai.
Pagrindinis pradžia (main start) / Pagrindinis pabaiga (main end): pradžia ir pabaiga palei pagrindinę ašį.
Perpindinė pradžia (cross start) / Perpindinė pabaiga (cross end): pradžia ir pabaiga palei perpindinę ašį.

Pagrindinės Flexbox savybės flex konteineriui:

display: nurodo, kad elementas yra flex konteineris (flex arba inline-flex).
flex-direction: nurodo pagrindinės ašies kryptį (row, row-reverse, column, column-reverse).
flex-wrap: nurodo, ar flex elementai pereis į naują eilutę/stulpelį, jei vietos nepakanka (nowrap, wrap, wrap-reverse).
justify-content: išlygina flex elementus pagal pagrindinę ašį (flex-start, flex-end, center, space-between, space-around, space-evenly).
align-items: išlygina flex elementus pagal perpindinę ašį (flex-start, flex-end, center, baseline, stretch).
align-content: išlygina flex elementų linijas (jei jų keli) pagal perpindinę ašį.

Pagrindinės flex elementų savybės:

order: nustato flex elemento rodymo tvarką (numatyta 0).
flex-grow: augimo koeficientas, kuris nurodo, kiek elementas gali padidėti užpildyti prieinamą erdvę.
flex-shrink: susitraukimo koeficientas, kuris nurodo, kiek elementas gali sumažėti, kad išvengtų perpildymo.
flex-basis: pradinė flex elemento dydis prieš paskirstant laisvą erdvę.
flex: trumpa forma flex-grow, flex-shrink ir flex-basis.
align-self: perrašo align-items konkrečiam flex elementui.

Pavyzdys naudojimui:

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; /* Padaro konteinerį flex konteineriu */
  justify-content: center; /* Išlygina elementus pagal centrą pagrindinėje ašyje */
  align-items: center; /* Išlygina elementus pagal centrą perpindinėje ašyje */
  height: 200px; /* Demonstracijai išlyginimo */
  border: 1px solid black;
}

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

Flexbox pagrindiniai privalumai:

Patogu išlyginti elementus horizontaliai ir vertikaliai.
Lanksti erdvės paskirstymas tarp elementų.
Paprastas elementų tvarkos keitimas.
Reaguojantis dizainas be float ir pozicijos naudojimo.
Geras palaikymas šiuolaikiniuose naršyklėse.