flex-shrink касиети

flex-shrink касиети flex-контейнердин ичиндеги бош орун жетпей калган учурда, flex-блок кошумча элементтерге салыштырмалуу канчалык кичирейетенин аныктайт.

Мисалы, эгерде flex-контейнердин ичиндеги бардык flex-блоктордо flex-shrink:1 болсо, анда алар бирдей өлчөмдө болот. Эгерде алардын биринде flex-shrink:2 болсо, анда ал калгандарынан 2 эсе кичине болот.

Колдонулат: белгилүү бир flex блогуна.

Бул касиет flex кыскартылган касиетинин курамдык бөлүгү болуп саналат.

Синтаксис

cssтандоочу {
  flex-shrink: оң сан;
}

Демейки маани: 1.

Мисал

Бизде 3 элемент бар дейли. Алардын ар биринин туурасы 200px жана жалпысы 600px түзөт, бул ата-эне контейнеринин туурасынан чоң, ал эми ал 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;
}

Результат:

Терс бош орунду формула боюнча эсептейли:

Элементтердин салмакталган жалпы туурасы, ар бир элемент үчүн flex-shrink касиетинин маанилерин эске алуу менен, төмөнкүчө болот: