97 lines
2.9 KiB
Markdown
97 lines
2.9 KiB
Markdown
---
|
|
id: 587d78ad367417b2b2512afa
|
|
title: Use the flex-wrap Property to Wrap a Row or Column
|
|
challengeType: 0
|
|
videoUrl: ''
|
|
localeTitle: ''
|
|
---
|
|
|
|
## Description
|
|
<section id="description"> يحتوي CSS flexbox على ميزة لتقسيم عنصر مرن إلى صفوف متعددة (أو أعمدة). بشكل افتراضي ، ستلائم حاوية مرنة جميع العناصر المرنة معًا. على سبيل المثال ، سيكون كل صف على سطر واحد. ومع ذلك ، باستخدام خاصية <code>flex-wrap</code> ، فإنه يخبر CSS التفاف العناصر. هذا يعني أن العناصر الإضافية تنتقل إلى صف أو عمود جديد. تتوقف نقطة توقف المكان الذي يحدث فيه الالتفاف على حجم العناصر وحجم الحاوية. يحتوي CSS أيضًا على خيارات لاتجاه الالتفاف: <ul style=";text-align:right;direction:rtl"><li style=";text-align:right;direction:rtl"> <code>nowrap</code> : هذا هو الإعداد الافتراضي ، ولا يؤدي إلى التفاف العناصر. </li><li style=";text-align:right;direction:rtl"> <code>wrap</code> : يلتف عناصر من اليسار إلى اليمين إذا كانت في صف أو من أعلى لأسفل إذا كانت في عمود. </li><li style=";text-align:right;direction:rtl"> <code>wrap-reverse</code> : يلتف عناصر من أسفل إلى أعلى إذا كانت متتالية أو من اليمين إلى اليسار إذا كانت في عمود. </li></ul></section>
|
|
|
|
## Instructions
|
|
undefined
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
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.");'
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
<div id='html-seed'>
|
|
|
|
```html
|
|
<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>
|
|
|
|
```
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
// solution required
|
|
```
|
|
</section>
|