w3-CSS append 當內容寬度大於帶有 inline-flex 的 div 中的視口寬度時換行

Question

我將一堆帶有 w3-card 的盒子附加到這個 div 中：

<div id="myClasses" class="w3-container" style="display: inline-flex;">

這是我 append 的位置：

myclasses.append([
     $('<div/>', {"class": "w3-card button", "onclick": "enterThisClass(" + e + ")"}).append([
           $('<h3/>').text(snapshot.val().name)
     ])
])

這工作正常，但是當我並排放置太多盒子時，它們只會擠壓在一起並將它們隱藏在邊緣上。 我將如何做到這一點，這樣它就不會壓扁 go 邊緣，而是換一條線？

Answer 1

嘗試向動態 div 添加寬度。 比如 20%。 所以當你 append 5 div 的時候。 第 6 個 div 將在下方自動移動。 嘗試