---
id: 587d78ae367417b2b2512afe
title: Use the flex Shorthand Property
challengeType: 0
videoUrl: ''
localeTitle: استخدم خاصية الاختزال المرن
---
## Description
هناك اختصار متاح لضبط عدة خصائص المرن دفعة واحدة. يمكن تعيين الخصائص flex-grow
و flex-shrink
و flex-basis
معاً باستخدام الخاصية flex
. على سبيل المثال ، flex: 1 0 10px;
سيحدد العنصر إلى flex-grow: 1;
، flex-shrink: 0;
، و flex-basis: 10px;
. إعدادات الخاصية الافتراضية هي flex: 0 1 auto;
.
## Instructions
إضافة flex
إلى #box-1
و #box-2
. قم بإعطاء #box-1
القيم بحيث يكون نموها flex-grow
2 ، حيث يكون flex-shrink
2 ، ويكون أساسه flex-basis
150 بكسل. أعط #box-2
القيم بحيث يكون flex-grow
flex-shrink
هو 1 ، و هو flex-shrink
هو 1 ، و أساسه flex-basis
هو 150 بكسل. ستؤدي هذه القيم إلى زيادة #box-1
لملء المساحة الزائدة بمعدل ضعف #box-2
عندما تكون الحاوية أكبر من 300 بكسل وتتقلص بمعدل ضعف #box-2
عندما تكون الحاوية أقل من 300 بكسل. يمثل 300 بكسل الحجم المجمع لقيم flex-basis
.
## Tests
```yml
tests:
- text: 'يجب أن يحتوي عنصر #box-1
على مجموعة خصائص flex
بقيمة 2 2 150 بكسل.'
testString: 'assert($("#box-1").css("flex-grow") == "2" && $("#box-1").css("flex-shrink") == "2" && $("#box-1").css("flex-basis") == "150px", "The #box-1
element should have the flex
property set to a value of 2 2 150px.");'
- text: 'يجب أن يحتوي عنصر #box-2
على مجموعة خصائص flex
بقيمة 1 1 150 بكسل.'
testString: 'assert($("#box-2").css("flex-grow") == "1" && $("#box-2").css("flex-shrink") == "1" && $("#box-2").css("flex-basis") == "150px", "The #box-2
element should have the flex
property set to a value of 1 1 150px.");'
- text: 'يجب أن تستخدم الشفرة الخاصة بك الخاصية flex
لـ #box-1
و #box-2
.'
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the flex
property for #box-1
and #box-2
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```