شرح صفوف ومحتوى الفقرة
يؤدي إسناد معامل أكبر مثل flex-shrink: 2 أو flex-shrink: 3 إلى جعل العنصر يتحمل حصة أكبر من عجز المساحة مقارنةً بقرينه الذي يحمل flex-shrink: 1، فينكمش بسرعة أكبر كلما ضاقت الحاوية.
وخلافاً لخاصية التمدد، تضرب معادلة W3C معامل flex-shrink في وزن الحجم الأساسي flex-basis لكل عنصر؛ وبذلك يتنازل اللوح العريض ذو 300px عن بكسلات أكثر من الشارة الصغيرة ذات 80px حمايةً للعناصر الصغيرة من الاختفاء المبكر.
CSS
.tight-row {
display: flex;
width: 340px;
}
.box-slow {
flex-basis: 220px;
flex-shrink: 1;
}
.box-fast {
flex-basis: 220px;
flex-shrink: 3;
}