html - 当内容宽度大于带有 inline-flex 的 div 中的视口宽度时，w3-CSS 附加换行符

Question

我在这个 div 中添加了一堆带有 w3-card 的盒子：

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

这是我附加它的地方：

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

这行得通，但是当我有太多并排的盒子时，它们只会挤在一起并将盒子隐藏在边缘。我将如何做到它不会压扁也不会越过边缘，而是制作一条新线？

Answer 1

尝试将宽度添加到动态 div。比如20%。因此，当您附加 5 个 div 时。第 6 个 div 将自动移到下方。尝试