Kā darbojas flex-grow un flex-shrink īpašības…

flex-grow nosaka, cik lielā mērā elements var palielināties brīvās vietas klātbūtnē konteinerā. Vērtība 0 (noklusējuma) nozīmē, ka elements nepalielināsies. Pozitīvas vērtības norāda uz izaugsmes koeficientu attiecībā uz citiem flex elementiem tajā pašā rindā.

flex-shrink nosaka, cik ļoti elements var sarukt, ja trūkst brīvās vietas konteinerā. Vērtība 1 (noklusējuma) nozīmē, ka tas var sarukt. Vērtība 0 aizliedz sarukšanu. Pozitīvas vērtības norāda uz sarukšanas koeficientu attiecībā uz citiem flex elementiem.

Piemērs:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

.container {
  display: flex;
  width: 400px; /* Konteineru platums */
}

.item {
  flex-basis: 100px; /* Katra elementa sākuma izmērs */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Aizņems 1 daļu no brīvās vietas */
  flex-shrink: 0; /* Nebūs sarukts */
}

.item-2 {
  flex-grow: 2; /* Aizņems 2 daļas no brīvās vietas */
  flex-shrink: 1; /* Var sarukt */
}

.item-3 {
  flex-grow: 1; /* Aizņems 1 daļu no brīvās vietas */
  flex-shrink: 1; /* Var sarukt */
}

Šajā gadījumā kopējais sākotnējais elementu izmērs ir 300px (3 * 100px). Brīvā vieta ir 100px (400px - 300px). Šī brīvā vieta tiks sadalīta starp elementiem pēc to flex-grow proporcijas: 1 + 2 + 1 = 4. Elementam 1 tiks piešķirts 1/4 * 100px = 25px papildu vietas. Elementam 2 tiks piešķirts 2/4 * 100px = 50px papildu vietas. Elementam 3 tiks piešķirts 1/4 * 100px = 25px papildu vietas.

To galīgais izmērs būs:

Elements 1: 100px + 25px = 125px
Elements 2: 100px + 50px = 150px
Elements 3: 100px + 25px = 125px

Ja konteineris būtu nepietiekams (piemēram, 200px platums), būtu nepieciešams samazināt elementus. Samazināšanas laikā ņem vērā flex-shrink un to pašreizējo izmēru. Trūkstošā vieta tiek sadalīta starp elementiem ar flex-shrink lielāku par 0, proporcionāli to flex-shrink un pašreizējam izmēram (pēc flex-basis ņemšanas vērā). Samazināšanas algoritms ir sarežģītāks, bet galvenā ideja ir tāda, ka elementi ar lielāku flex-shrink vai lielāku pašreizējo izmēru tiks samazināti vairāk.

Svarīgi atcerēties, ka flex-basis, flex-grow un flex-shrink bieži tiek lietoti kopā kā īsāks flex īpašums. Piemēram, flex: 1 1 auto; ir ekvivalents ar flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Lielāka prioritāte ir šāda:

flex-basis: nosaka sākotnējo elementa izmēru.
flex-grow: sadala pozitīvo brīvo vietu.
flex-shrink: sadala negatīvo brīvo vietu (samazināšanu).

Kā darbojas flex-grow un flex-shrink īpašības?