为什么在提供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>