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

我正在尝试为flex元素添加宽度.我提供了弹性基础: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>

提前致谢.

最佳答案
使用包装属性 – flex-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>

转载注明原文:html – 为什么在提供flex-basis时,flex元素不会进入下一行? - 代码日志