---
id: 587d78ae367417b2b2512afd
title: Use the flex-basis Property to Set the Initial Size of an Item
challengeType: 0
videoUrl: ''
localeTitle: استخدم الخاصية الأساسية المرنة لتعيين الحجم الأولي لعنصر
---
## Description
تحدد الخاصية flex-basis
الحجم الأولي للعنصر قبل أن تقوم CSS بإجراء عمليات ضبط باستخدام flex-shrink
أو flex-grow
. الوحدات المستخدمة بواسطة الخاصية flex-basis
هي نفس خصائص الحجم الأخرى ( px
، em
، %
، إلخ). عناصر قيمة الأحجام auto
استنادًا إلى المحتوى.
## Instructions
اضبط الحجم الأولي للمربعات باستخدام flex-basis
. أضف flex-basis
إلى #box-1
و #box-2
. Give #box-1
a value of 10em
and #box-2
a value of 20em
.
## Tests
```yml
tests:
- text: 'يجب أن يحتوي عنصر #box-1
على خاصية flex-basis
.'
testString: 'assert($("#box-1").css("flex-basis") != "auto", "The #box-1
element should have a flex-basis
property.");'
- text: 'يجب أن يحتوي عنصر #box-1
على قيمة flex-basis
10em
.'
testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), "The #box-1
element should have a flex-basis
value of 10em
.");'
- text: 'يجب أن يكون عنصر #box-2
الخاصية flex-basis
.'
testString: 'assert($("#box-2").css("flex-basis") != "auto", "The #box-2
element should have the flex-basis
property.");'
- text: 'يجب أن يحتوي عنصر #box-2
على قيمة flex-basis
20em
.'
testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), "The #box-2
element should have a flex-basis
value of 20em
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```