CSS/flex-shrink

الخاصية flex-shrink في CSS تُحدِّد معامل التقلص لأحد عناصر flex، وهي تُحدِّد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex نسبةً إلى بقية العناصر، وذلك في حال كان العرض الافتراضي للعناصر flex أكبر من الحاوية.

/* <number> قيم عددية */
flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

القيمة الابتدائية	1
تُطبَّق على	عناصر flex.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

في المثال الآتي، حددنا تقلص العناصر A و B و C باستخدام القاعدة flex-shrink: 1، بينما كان تقلص العناصر D و E مساويًا إلى 2، لاحظ كيف ضبطنا الأبعاد المبدئية للعناصر باستخدام الخاصية flex-basis.

<div id="content">
  <div class="box" style="background-color: salmon;">A</div>
  <div class="box" style="background-color: lightblue;">B</div>
  <div class="box" style="background-color: gold;">C</div>
  <div class="box1" style="background-color: crimson;">D</div>
  <div class="box1" style="background-color: lightgreen;">E</div>
</div>

شيفرة CSS:

#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
  padding: 0.25em;
}

.box { 
  flex-shrink: 1;
}

.box1 { 
  flex-shrink: 2; 
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	29.0	20.0	11	12.5	9.0

الإصدارات القديمة من بعض المتصفحات (مثل Chrome و IE و Safari) كانت تدعم flexbox لكن مع استخدام سابقة (-webkit- أو -ms-).

البنية العامة

تقبل الخاصية flex-shrink قيمةً واحدةً ألا وهي رقمٌ دون واحدة.

القيمة <number>

عدد صحيح موجب يحدد كيف يكون تقلص أحد عناصر flex نسبةً إلى بقية عناصر flex، القيمة الافتراضية هي 1. ولا يجوز استخدام أرقام سالبة.

البنية الرسمية

flex-shrink: <number>;

مصادر ومواصفات

• مواصفة CSS Flexible Box Layout Module.