为什么在提供flex-basis时,flex元素不会进入下一行？

Question

我正在尝试为flex元素添加宽度.我提供了flex-basis:20%.如何在下一行/第一行中获得第6和第7个元素？

添加下面的便笺簿链接: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>

提前致谢.

Answer 1

使用包装属性 - flex-wrap: wrap在你的flexbox.

即使水平边距也会影响包装 - 因此设置margin: 0为body重置默认浏览器边距并应用于box-sizing: border-box处理边框.

见下面的演示:

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