Die flex-shrink eienskap

Die eienskap flex-shrink bepaal tot water mate 'n flex-blok sal krimp in vergelyking met die aangrensende elemente binne 'n flex-houer wanneer daar nie genoeg vry spasie is nie.

Byvoorbeeld, as alle flex-blokke binne 'n flex-houer flex-shrink:1 het, sal hulle van gelyke grootte wees. As een van hulle flex-shrink:2 het, sal dit 2 keer kleiner wees as al die ander.

Van toepassing op: 'n spesifieke flex-blok.

Hierdie eienskap maak deel uit van die verkorte eienskap flex.

Sintaksis

cssselektor {
  flex-shrink: positiewe getal;
}

Verstekwaarde: 1.

Voorbeeld

Gestel ons het 3 elemente. Die breedte van elkeen is 200px en saam gelyk aan 600px, wat groter is as die breedte van die ouerhouer, wat gelyk is aan 350px:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem2">3</div>
</div>

css.parent {
  display: flex;
  width: 350px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 200px;
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  flex-shrink: 1;
}
.elem2 {
  flex-shrink: 2;
}
.elem3 {
  flex-shrink: 3;
}

Результат:

Laat ons die negatiewe vry spasie bereken met die formule:

Die geweegde totale breedte van die elemente met inagneming van die waardes van die eienskap flex-shrink vir elke element sal gelyk wees aan: