Why don't flex items go to the next line when flex is provided?

Question

I am trying to add width to flex elements. I have provided flex-basis:20%. How can I get the 6th and 7th elements in the next line / line?

Adding a notepad link below: scratchpad.io

#wrapper {
  display: flex;
}
.children {
  flex-basis: 20%;
  border: 1px solid;
}

<div id="wrapper">
  <div class="children">
    1
  </div>
  <div class="children">
    2
  </div>
  <div class="children">
    3
  </div>
  <div class="children">
    4
  </div>
  <div class="children">
    5
  </div>
  <br>
  <div class="children">
    6
  </div>
  <div class="children">
    7
  </div>


</div>

Run codeHide result

Thanks in advance.

Answer 1

Use the wrapping property flex-wrap: wrapon flexbox.

Even horizontal fields affect the packaging - so set margin: 0on bodythe reset default field for the browser and apply box-sizing: border-boxto take care of the borders.

See the demo below:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
#wrapper {
  display: flex;
  flex-wrap: wrap;
}
.children {
  flex-basis: 20%;
  border: 1px solid;
}

<div id="wrapper">
  <div class="children">1</div>
  <div class="children">2</div>
  <div class="children">3</div>
  <div class="children">4</div>
  <div class="children">5</div>
  <div class="children">6</div>
  <div class="children">7</div>
</div>

Run codeHide result