3.3 KiB
3.3 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78ae367417b2b2512afe | Use the flex Shorthand Property | 0 | استخدم خاصية الاختزال المرن |
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
tests:
- text: 'يجب أن يحتوي عنصر <code>#box-1</code> على مجموعة خصائص <code>flex</code> بقيمة 2 2 150 بكسل.'
testString: 'assert($("#box-1").css("flex-grow") == "2" && $("#box-1").css("flex-shrink") == "2" && $("#box-1").css("flex-basis") == "150px", "The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.");'
- text: 'يجب أن يحتوي عنصر <code>#box-2</code> على مجموعة خصائص <code>flex</code> بقيمة 1 1 150 بكسل.'
testString: 'assert($("#box-2").css("flex-grow") == "1" && $("#box-2").css("flex-shrink") == "1" && $("#box-2").css("flex-basis") == "150px", "The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.");'
- text: 'يجب أن تستخدم الشفرة الخاصة بك الخاصية <code>flex</code> لـ <code>#box-1</code> و <code>#box-2</code> .'
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.");'
Challenge Seed
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
}
#box-2 {
background-color: orangered;
height: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
Solution
// solution required