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 қасиетінің мәндерін ескере отырып, элементтердің салмақталған енінің қосындысы мынаған тең болады:

Енді бірінші элементтің қаншалықты қысқаратынын анықтайық:

Екінші элемент:

Үшінші элемент:

flex-shrink мәні 3 болатын үшінші элемент басқа элементтерге қарағанда көбірек қысқарады.

Сондай-ақ қараңыз