Kaip nustatyti flexbox savybes?

Yra nustatomos savybės konteineriui (elementui, kuriam taikomas display: flex arba display: inline-flex) ir jo tiesioginiams palikuonims (viduje esančioms elementams).

Konteinerio savybės:

display: Nustato, kad elementas yra flex konteineris. Galimos reikšmės: flex (blokinis) ir inline-flex (eilutės).
flex-direction: Nustato pagrindinio ašies kryptį, kurioje išsidėstys flex elementai. Galimos reikšmės: row (numatyta, iš kairės į dešinę), row-reverse (iš dešinės į kairę), column (iš viršaus į apačią), column-reverse (iš apačios į viršų).
flex-wrap: Valdo, ar flex elementai pereis į naują eilutę, jei jie viršys konteinerio ribas. Galimos reikšmės: nowrap (numatyta, neperkelti), wrap (perkelti į naują eilutę), wrap-reverse (perkelti į naują eilutę atvirkštine tvarka).
justify-content: Išlygina flex elementus pagal pagrindinę ašį. Galimos reikšmės: flex-start (konteinerio pradžia), flex-end (konteinerio pabaiga), center, space-between (vienodai tarpai tarp elementų, pirmas prie pradžios, paskutinis prie pabaigos), space-around (vienodi tarpai aplink kiekvieną elementą).
align-items: Išlygina flex elementus pagal skersinę ašį. Galimos reikšmės: stretch (numatyta, ištempia elementus pagal konteinerio aukštį), flex-start (konteinerio pradžia pagal skersinę ašį), flex-end (konteinerio pabaiga), center, baseline (išlygina pagal teksto bazinę liniją).
align-content: Išlygina flex elementų eilutes (kai naudojama flex-wrap) pagal skersinę ašį. Netaikoma, jei tik viena eilutė. Galimos reikšmės: stretch (numatyta), flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Nustato atstumą tarp flex elementų pagal pagrindinę ir skersinę ašis.

Elementų (tiesioginių flex konteinerio vaikų) savybės:

order: Nustato elemento išdėstymo tvarką konteineryje. Numatyta, kad visi elementai turi order: 0. Mažesnė reikšmė order reiškia, kad elementas bus anksčiau.
flex-grow: Nustato, kiek kartų elementas gali išaugti, jei yra laisvos vietos. Numatyta 0 (neauga).
flex-shrink: Nustato, kiek kartų elementas gali sumažėti, jei trūksta vietos. Numatyta 1 (mažėja).
flex-basis: Nustato pradinį elemento dydį prieš paskirstant laisvą vietą. Gali būti pikseliais, procentais arba auto. Numatyta auto.
flex: trumpa savybė flex-grow, flex-shrink ir flex-basis. Pvz., flex: 1 1 auto;.
align-self: Perrašo align-items reikšmę konkrečiam elementui. Galimos reikšmės: auto (naudojama tėvo align-items), stretch, flex-start, flex-end, center, baseline.

Pavyzdys:

.flex-container {
  display: flex; /* Padaro elementą flex konteineriu */
  flex-direction: row; /* Išdėsto elementus eilutėje */
  justify-content: center; /* Išlygina elementus pagal pagrindinę ašį */
  align-items: center; /* Išlygina elementus pagal skersinę ašį */
  gap: 10px; /* Nustato atstumą tarp elementų */
}

.flex-item {
  flex-grow: 1; /* Elementas gali didėti */
  flex-basis: 100px; /* Pradinis dydis */
}

.special-item {
  order: -1; /* Šis elementas bus pirmas */
  align-self: flex-end; /* Perrašo išlyginimą pagal skersinę ašį */
}