Files
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md
Naomi Carrigan d781c63fdf chore: resolve flagged Crowdin issues (#45442)
* chore: resolve bengali issues

* chore: resolve french issues

* chore: resolve hebrew issues

* chore: resolve persian issues

* chore: resolve portuguese brazilian issues

* chore: resolve russian issues

* chore: resolve spanish issues

* chore: resolve japanese issues
2022-03-19 13:26:57 +05:30

3.0 KiB

id, title, challengeType, videoUrl, forumTopicId, dashedName
id title challengeType videoUrl forumTopicId dashedName
587d78ad367417b2b2512afa Use the flex-wrap Property to Wrap a Row or Column 0 https://scrimba.com/p/pVaDAv/cQv9ZtG 301114 use-the-flex-wrap-property-to-wrap-a-row-or-column

--description--

CSS flexbox has a feature to split a flex container into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.

However, using the flex-wrap property tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.

CSS also has options for the direction of the wrap:

  • nowrap: this is the default setting, and does not wrap items.
  • wrap: wraps items onto multiple lines from top-to-bottom if they are in rows and left-to-right if they are in columns.
  • wrap-reverse: wraps items onto multiple lines from bottom-to-top if they are in rows and right-to-left if they are in columns.

--instructions--

The current layout has too many boxes for one row. Add the CSS property flex-wrap to the #box-container element, and give it a value of wrap.

--hints--

The #box-container element should have the flex-wrap property set to a value of wrap.

assert($('#box-container').css('flex-wrap') == 'wrap');

--seed--

--seed-contents--

<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>

--solutions--

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 100%;
    flex-wrap: wrap;
  }
  #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>