2.9 KiB
2.9 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78ad367417b2b2512afa | Use the flex-wrap Property to Wrap a Row or Column | 0 |
Description
flex-wrap
، فإنه يخبر CSS التفاف العناصر. هذا يعني أن العناصر الإضافية تنتقل إلى صف أو عمود جديد. تتوقف نقطة توقف المكان الذي يحدث فيه الالتفاف على حجم العناصر وحجم الحاوية. يحتوي CSS أيضًا على خيارات لاتجاه الالتفاف: -
nowrap
: هذا هو الإعداد الافتراضي ، ولا يؤدي إلى التفاف العناصر. -
wrap
: يلتف عناصر من اليسار إلى اليمين إذا كانت في صف أو من أعلى لأسفل إذا كانت في عمود. -
wrap-reverse
: يلتف عناصر من أسفل إلى أعلى إذا كانت متتالية أو من اليمين إلى اليسار إذا كانت في عمود.
Instructions
undefined
Tests
tests:
- text: 'يجب أن <code>#box-container</code> عنصر <code>#box-container</code> الخاصية <code>flex-wrap</code> لتعيين قيمة التفاف.'
testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.");'
Challenge Seed
<style>
#box-container {
background: gray;
display: flex;
height: 100%;
}
#box-1 {
background-color: dodgerblue;
width: 25%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 25%;
height: 50%;
}
#box-3 {
background-color: violet;
width: 25%;
height: 50%;
}
#box-4 {
background-color: yellow;
width: 25%;
height: 50%;
}
#box-5 {
background-color: green;
width: 25%;
height: 50%;
}
#box-6 {
background-color: black;
width: 25%;
height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
<div id="box-5"></div>
<div id="box-6"></div>
</div>
Solution
// solution required