---
id: 587d78ad367417b2b2512afb
title: Use the flex-shrink Property to Shrink Items
challengeType: 0
videoUrl: ''
localeTitle: استخدم خاصية الانكماش المرن لتقليص العناصر
---
## Description
حتى الآن ، تنطبق جميع الخصائص في التحديات على الحاوية المرنة (أصل العناصر المرنة). ومع ذلك ، هناك العديد من الخصائص المفيدة للعناصر المرنة. الأول هو خاصية flex-shrink
. عندما يتم استخدامه ، فإنه يسمح بتقليص عنصر إذا كانت الحاوية المرن صغيرة جدًا. تنكمش العناصر عندما يكون عرض الحاوية الأصل أصغر من عرض جميع العناصر المرن الموجودة بها. تأخذ خاصية flex-shrink
الأعداد كقيم. كلما زاد العدد ، كلما تنكمش أكثر مقارنة بالعناصر الأخرى في الحاوية. على سبيل المثال ، إذا كان عنصر واحد يحتوي على قيمة flex-shrink
1 والآخر يحتوي على قيمة flex-shrink
3 ، فإن القيمة التي تحتوي على 3 سوف تتقلص ثلاثة أضعاف نفس الأخرى.
## Instructions
أضف خاصية CSS flex-shrink
إلى كل من #box-1
و #box-2
. Give #box-1
a value of 1 and #box-2
a value of 2.
## Tests
```yml
tests:
- text: 'يجب أن يحتوي عنصر #box-1
على خاصية flex-shrink
تعيينها إلى قيمة 1.'
testString: 'assert($("#box-1").css("flex-shrink") == "1", "The #box-1
element should have the flex-shrink
property set to a value of 1.");'
- text: 'يجب أن يحتوي عنصر #box-2
على الخاصية flex-shrink
تعيينها إلى قيمة 2.'
testString: 'assert($("#box-2").css("flex-shrink") == "2", "The #box-2
element should have the flex-shrink
property set to a value of 2.");'
```
## Challenge Seed
## Solution
```js
// solution required
```