freeCodeCamp

2.9 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78ad367417b2b2512afa	Use the flex-wrap Property to Wrap a Row or Column	0

Description

يحتوي CSS flexbox على ميزة لتقسيم عنصر مرن إلى صفوف متعددة (أو أعمدة). بشكل افتراضي ، ستلائم حاوية مرنة جميع العناصر المرنة معًا. على سبيل المثال ، سيكون كل صف على سطر واحد. ومع ذلك ، باستخدام خاصية 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

2.9 KiB Raw Blame History