Flex-shrink häsiýeti

flex-shrink häsiýeti, erkin meýdan ýeterliksiz bolanda, flex-konteýner içindäki goňşy elementlere garanyňda flex-blogyň näçeräk kiçeljekdigini kesgitleýär.

Mysal üçin, eger flex-konteýner içindäki ähli flex-bloklar flex-shrink:1 bolsa, olar deň ölçegde bolar. Eger olaryň biri flex-shrink:2 bolsa, ol beýlekilerden 2 esse kiçi bolar.

Ulanylýar: aýratyn flex blogyna.

Bu häsiýet, flex gysgaldylan häsiýetiň bir bölegi hökmünde girýär.

Sintaksis

cssselektor {
  flex-shrink: positive san;
}

Deslapky bahasy: 1.

Mysal

Bizde 3 element bolsun. Olaryň her biriniň ini 200px we jemi 600px deň, bu bolsa enesi konteýneriniň iniinden uly, ini 350px deň:

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;
}

Результат:

Gaty erkin meýdany formuladan peýdalanyp hasaplaýalyň:

Elementleriň bahalandyrylan ini flex-shrink häsiýetiniň bahalaryny her element üçin göz öňünde tutup, şuna deň bolar:

Indi birinji element näçeräk gysyljakdygyny kesgitläýliň:

Ikinji element:

Üçünji element:

Şeýlelik bilen, flex-shrink bahasy 3 deň bolan üçünji element, beýleki elementlerden has köp gysylar.

Şeýle-de serediň