爲什麼在提供彈性基礎時，彈性元素不會進入下一行？

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>