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