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

Question

我将一堆带有w3-card的盒子附加到这个div中：

<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会自动移位到下面。试一试