How does flex-wrap decide how many flex items to be wrapped?

HTML-CSS
1

Tell us what’s happening:
I see the flex-wrap feature is working, and I am able to clear the task. But I am not able to understand how the feature decided to wrap 4 boxes and not any other number of boxes?

Your code so far


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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36.

Challenge: Use the flex-wrap Property to Wrap a Row or Column

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column

2

The reason it is always doing 4 is because of the CSS or style of each box. They are set to have a width of 25% so 4 of them will always equal 100% and the next 2 wrap. You could change all of the box widths to 250px and see how that works as you resize the view area.

1 Like
3

Got it - Thanks. Now I understand better.

4

Css flexbox compute the internal number of items by using width, width can be in any format like %,Px,vw,VH . Our browser always keep computing it, iwhen there is no room for a item to fit in, then it going to wrap in next line.