Sobes.tech
Intervjuu abi
Vahendid
Intervjuu ettevalmistamine
Vahendid
Tööotsing
Vahendid
Juriidiline
Tagasi küsimuste juurde
Junior

Kuidas kasutada flexboxi elementide paigutamiseks lehel?

sobes.tech AI

Vastus AI-lt

Flexbox (või Flexible Box Layout) on CSS moodul, mis on mõeldud paindlike elementide paigutuste loomiseks konteineris, võimaldades hõlpsasti jaotada ruumi ning joondada elemente, isegi kui nende suurused on teadmata või dünaamiliselt muutuvas.

Flexboxi põhikontseptsioon on flex-konteiner ja selle flex-elemendid.

Suvandid flex-konteinerile (display: flex;):

  • flex-direction: Määrab flex-elementide paigutuse suuna (peamine telg).

    • row (vaikimisi): horisontaalselt vasakult paremale.
    • row-reverse: horisontaalselt paremal vasakule.
    • column: vertikaalselt ülevalt alla.
    • column-reverse: vertikaalselt alt üles.

  • flex-wrap: Määrab, kas flex-elemendid murtakse uuele reale, kui need ei mahu ühele reale.

    • nowrap (vaikimisi): kõik elemendid ühel real.
    • wrap: murtakse uuele reale.
    • wrap-reverse: murtakse uuele reale, kuid vastupidises järjekorras.

  • justify-content: Joondab flex-elemendid peamisel teljel.

    • flex-start (vaikimisi): joondus alguses.
    • flex-end: joondus lõpus.
    • center: joondus keskel.
    • space-between: ühtlane jaotus vahedega elementide vahel.
    • space-around: ühtlane jaotus vahedega elementide ümber.
    • space-evenly: ühtlane jaotus kõigi vahedega.

  • align-items: Joondab flex-elemendid risti peamise telje suunas.

    • stretch (vaikimisi, kui kõrgus/laius pole määratud): venitab elemendid.
    • flex-start: joondus alguses.
    • flex-end: joondus lõpus.
    • center: joondus keskel.
    • baseline: joondus teksti baasjoonel.

  • align-content: Joondab flex-ridade elemente risti peamise telje suunas, kui on ridade murrud (flex-wrap: wrap). Toimib sarnaselt justify-content-ga, kuid vertikaalselt.

    • stretch (vaikimisi): venitab read.
    • flex-start: read alguses.
    • flex-end: read lõpus.
    • center: read keskel.
    • space-between: ühtlane jaotus ridade vahel.
    • space-around: ühtlane jaotus ridade ümber.

  • gap, row-gap, column-gap: määrab vahed flex-elementide vahel.

.flex-container {
  display: flex; /* Muudab elemendi flex-konteineriks */
  flex-direction: row; /* Elementid paigutatakse horisontaalselt */
  flex-wrap: wrap; /* Elementid murtakse uuele reale */
  justify-content: center; /* Elementid joondatakse keskpunkti peamisel teljel */
  align-items: center; /* Elementid joondatakse keskpunkti risti peamisel teljel */
  gap: 10px; /* 10px vahe flex-elemendid vahel */
}

Suvandid flex-elemendile (otsesed flex-konteineri lapsed):

  • order: Määrab elementide järjestuse (vaikimisi 0). Vähem väärtused ilmuvad varem.

  • flex-grow: Määrab koefitsiendi, mis näitab, kui palju element võib kasvada, jaotades vaba ruumi.

  • flex-shrink: Määrab koefitsiendi, mis näitab, kui palju element võib kokku tõmbuda.

  • flex-basis: Määrab algsuuruse enne vaba ruumi jaotamist.

  • flex: Lühivorm flex-grow, flex-shrink ja flex-basis jaoks.

  • align-self: Ülekirjutab align-items väärtuse üksikule elemendile.

.flex-item {
  order: 2; /* See element kuvatakse teise */
  flex-grow: 1; /* Kasutab ülejäänud ruumi */
  flex-shrink: 0; /* Ei kahaneks */
  flex-basis: 100px; /* Algne suurus 100px */
  align-self: flex-start; /* Joondus alguses vertikaalselt */
}

.another-item {
  flex: 1 1 auto; /* Lühivorm grow: 1, shrink: 1, basis: auto */
}

Flexbox võimaldab luua erinevaid paigutusi, alates lihtsatest joondustest kuni keerulisemate reageerivate struktuurideni, hallates ruumi ja elementide joondamist konteineris.

EelmineEdasi