Sobes.tech
Interviu pagalba
Ištekliai
Interviu paruošimas
Ištekliai
Darbo paieška
Ištekliai
Teisinė
Grįžkime prie klausimų
Junior

Kaip naudoti flexbox elementų išdėstymui puslapyje?

sobes.tech AI

Atsakymas iš AI

Flexbox (arba Lankstus dėžių išdėstymas) – tai CSS modulis, skirtas kurti lankstesnius elementų maketus konteineryje, leidžiant lengvai paskirstyti erdvę ir išlyginti elementus, net jei jų dydžiai yra nežinomi arba dinamiškai keičiasi.

Pagrindinė Flexbox koncepcija – tai flex konteineris ir jo flex elementai.

Savybės flex konteineriui (display: flex;):

  • flex-direction: Nustato flex elementų išdėstymo kryptį (pagrindinė ašis).

    • row (numatyta): horizontaliai iš kairės į dešinę.
    • row-reverse: horizontaliai iš dešinės į kairę.
    • column: vertikaliai iš viršaus į apačią.
    • column-reverse: vertikaliai iš apačios į viršų.

  • flex-wrap: Nustato, ar flex elementai perkelti į naują eilutę, jei jų nepakanka vienai eilutei.

    • nowrap (numatyta): visi elementai vienoje eilutėje.
    • wrap: perkelti į naują eilutę.
    • wrap-reverse: perkelti į naują eilutę, bet atvirkščia tvarka.

  • justify-content: Išlygina flex elementus pagal pagrindinę ašį.

    • flex-start (numatyta): išlyginimas pradžioje.
    • flex-end: išlyginimas pabaigoje.
    • center: išlyginimas centre.
    • space-between: tolygus paskirstymas su tarpeliais tarp elementų.
    • space-around: tolygus paskirstymas su tarpeliais aplink elementus.
    • space-evenly: tolygus paskirstymas su vienodais tarpeliais tarp ir aplink elementus.

  • align-items: Išlygina flex elementus vertikalioje (perpinduliu) ašyje.

    • stretch (numatyta, jei nėra nustatyta aukščio/plotis): ištempia elementus.
    • flex-start: išlyginimas pradžioje.
    • flex-end: išlyginimas pabaigoje.
    • center: išlyginimas centre.
    • baseline: išlyginimas pagal teksto bazinę liniją.

  • align-content: Išlygina eilutes flex elementų vertikalioje ašyje, kai yra perėjimai į naujas eilutes (flex-wrap: wrap). Veikia panašiai kaip justify-content, bet vertikalioje ašyje.

    • stretch (numatyta): ištempia eilutes.
    • flex-start: eilutės išlyginamos pradžioje.
    • flex-end: eilutės išlyginamos pabaigoje.
    • center: eilutės išlyginamos centre.
    • space-between: tolygus paskirstymas tarp eilutžių.
    • space-around: tolygus paskirstymas aplink eilutes.

  • gap, row-gap, column-gap: nustato tarpus tarp flex elementų.

.flex-container {
  display: flex; /* Nustato elementą kaip flex konteinerį */
  flex-direction: row; /* Elementai išdėstomi horizontaliai */
  flex-wrap: wrap; /* Elementai perkelti į naują eilutę */
  justify-content: center; /* Elementai išlyginami centre pagal pagrindinę ašį */
  align-items: center; /* Elementai išlyginami centre vertikalioje ašyje */
  gap: 10px; /* 10px tarpas tarp elementų */
}

Savybės flex elementams (tiesioginiai flex konteinerio palikuonys):

  • order: Nustato elementų išdėstymo tvarką (numatyta 0). Mažesnės reikšmės elementai rodomi anksčiau.

  • flex-grow: Nustato koeficientą, kuris nurodo, kiek elementas gali išsitempti, palyginti su kitais.

  • flex-shrink: Nustato koeficientą, kuris nurodo, kiek elementas gali susitraukti.

  • flex-basis: Nustato pradinį elementų dydį prieš paskirstant laisvą erdvę.

  • flex: Sutrumpinta savybė, apimanti flex-grow, flex-shrink ir flex-basis.

  • align-self: Pakeičia išlyginimą pagal perpinduliu ašį tik tam tikram elementui.

.flex-item {
  order: 2; /* Šis elementas bus rodomas antras */
  flex-grow: 1; /* Užims likusią erdvę */
  flex-shrink: 0; /* Nesusitrauks */
  flex-basis: 100px; /* Pradinis dydis 100px */
  align-self: flex-start; /* Išlyginimas pradžioje vertikalioje ašyje */
}

.another-item {
  flex: 1 1 auto; /* Sutrumpinta reikšmė */
}

Flexbox leidžia kurti įvairius maketus, nuo paprastų išlyginimų iki sudėtingesnių adaptacinių struktūrų, valdant erdvės paskirstymą ir elementų išlyginimą konteineryje.

AnkstesnisKitas