Sobes.tech
Intervijas palīdzība
Resursi
Intervijas sagatavošana
Resursi
Darba meklēšana
Resursi
Juridisks
Atpakaļ pie jautājumiem
Junior

Kā izmantot flexbox elementu izvietošanai lapā?

sobes.tech AI

Atbilde no AI

Flexbox (vai Elastiskais Būvju Izvietojums) ir CSS modulis, kas paredzēts elastīgu elementu izkārtojumu veidošanai konteinerā, ļaujot viegli sadalīt telpu un izlīdzināt elementus, pat ja to izmēri ir nezināmi vai dinamiski mainās.

Galvenā Flexbox koncepcija ir flex konteineris un tā flex elementi.

Sastāvdaļas flex konteinerim (display: flex;):

  • flex-direction: Nosaka flex elementu izvietojuma virzienu (galvenā ass).

    • row (noklusējums): horizontāli no kreisās uz labo.
    • row-reverse: horizontāli no labās uz kreiso.
    • column: vertikāli no augšas uz leju.
    • column-reverse: vertikāli no apakšas uz augšu.

  • flex-wrap: Nosaka, vai flex elementi tiek pārnesti uz jaunu rindu, ja tie neietilpst vienā rindā.

    • nowrap (noklusējums): visi elementi vienā rindā.
    • wrap: pārnesti uz jaunu rindu.
    • wrap-reverse: pārnesti uz jaunu rindu, bet pretējā secībā.

  • justify-content: Izlīdzina flex elementus pa galveno asi.

    • flex-start (noklusējums): izlīdzināšana sākumā.
    • flex-end: izlīdzināšana beigās.
    • center: izlīdzināšana centrā.
    • space-between: vienmērīgs sadalījums ar atstarpēm starp elementiem.
    • space-around: vienmērīgs sadalījums ar atstarpēm ap elementiem.
    • space-evenly: vienmērīgs sadalījums ar vienādām atstarpēm starp un ap elementiem.

  • align-items: Izlīdzina flex elementus perpendikulāri galvenajai asij.

    • stretch (noklusējums, ja nav norādīts augstums/platums): izstiepj elementus.
    • flex-start: izlīdzināšana sākumā.
    • flex-end: izlīdzināšana beigās.
    • center: izlīdzināšana centrā.
    • baseline: izlīdzināšana pēc teksta līnijas.

  • align-content: Izlīdzina rindu flex elementus perpendikulāri galvenajai asij, ja ir pārkārtojumi uz jaunu rindu (flex-wrap: wrap). Darbojas līdzīgi kā justify-content, bet vertikāli.

    • stretch (noklusējums): izstiepj rindas.
    • flex-start: rindas izlīdzinātas sākumā.
    • flex-end: rindas izlīdzinātas beigās.
    • center: rindas izlīdzinātas centrā.
    • space-between: vienmērīgs sadalījums starp rindām.
    • space-around: vienmērīgs sadalījums ap rindām.

  • gap, row-gap, column-gap: nosaka atstarpes starp flex elementiem.

.flex-container {
  display: flex; /* Padara elementu par flex konteineru */
  flex-direction: row; /* Elementi izvietoti horizontāli */
  flex-wrap: wrap; /* Elementi pārkārtojas uz jaunu rindu */
  justify-content: center; /* Elementi izlīdzināti centrā pa galveno asi */
  align-items: center; /* Elementi izlīdzināti centrā vertikāli */
  gap: 10px; /* 10px atstarpes starp elementiem */
}

Sastāvdaļas flex elementiem (tieši flex konteineru bērni):

  • order: Nosaka elementu izvietojuma kārtību (noklusējums 0). Mazākas vērtības parāda elementus agrāk.

  • flex-grow: Nosaka koeficientu, kas norāda, cik ļoti elements var izstiepties, salīdzinot ar citiem.

  • flex-shrink: Nosaka koeficientu, kas norāda, cik ļoti elements var sarukt.

  • flex-basis: Nosaka sākotnējo elementa izmēru pirms brīvās telpas sadales.

  • flex: Saīsināta īpašība, kas apvieno flex-grow, flex-shrink un flex-basis.

  • align-self: Pārdefinē elementa izlīdzinājumu perpendikulāri galvenajai asi, kas ir atkarīgs no align-items konteinerī. Pieņem tās pašas vērtības.

.flex-item {
  order: 2; /* Šis elements tiks parādīts otrs */
  flex-grow: 1; /* Aizņems atlikušo vietu */
  flex-shrink: 0; /* Nesamazināsies */
  flex-basis: 100px; /* Sākotnējais izmērs 100px */
  align-self: flex-start; /* Izlīdzinājums sākumā vertikāli */
}

.another-item {
  flex: 1 1 auto; /* Saīsināta vērtība */
}

Flexbox ļauj izveidot dažādus izkārtojumus, no vienkāršiem izlīdzinājumiem līdz sarežģītākām adaptīvām struktūrām, kontrolējot telpas sadali un elementu izlīdzinājumu konteinerā.

IepriekšējaisTālāk