Javascript 我想在flexbox中更改CSS中的板的位置

首先，请允许我说，我并不打算使用flexbox，所以如果必须使用不同的方法，我愿意接受。我正在制作一个JavaScript网站，其中显示带有问题和答案的图板。问题的长度不同，答案的数量也不同，因此盘子的高度不同

他们可能是，但我喜欢他们不是这样的样子。黑色图像显示它当前的样子，白色显示我希望它的样子。我希望能够完全能够定制这些板的位置，使其始终保持5px的固定距离

此外，如果一个盘子很长，我希望有可能，例如，3个小盘子可以放在任何一边，而不改变大小，只是简单地安排在这个凌乱干净的外观

所需外观：

当前外观：

注：更改是通过photoshop制作的所需板材的位置

请注意，我试过使用左上右下，但没有效果

这是一个板块的代码，但是每个板块的大小随着答案的数量而变化，我还取出了所有预定义和其他定义的变量

文本 .民意测验{ 显示器：flex； 弯曲方向：行； 柔性包装：包装； 填充物：5px； 证明内容：中心； 背景色：黑色； } .投票-1{ 宽度：210px； 高度：190px； 保证金：5px； 边框样式：实心； 边框底宽：1px； 边框顶部宽度：1px； 左边框宽度：1px； 右边框宽度：0.5px； 边界半径：10px； 边框颜色：rgb51、51、51； }

---

因此，我尝试使用一些js对数据进行排序

实际上，我在一个flex行容器中创建了4个flex列

JS本质上是在列之间对数据进行排序，而不是在一个元素中输出所有数据。它在列之间循环，直到没有更多的数据输出

通过这种方式，弹性柱可以适应下一个元素的高度，让你看起来“凌乱干净”。。。我想是吧

//这可以在具有不同高度的对象数组中生成虚拟轮询数据 var=[]；

---

fori=0；在任何时候，都可以将代码作为图像发布。如果可能，请创建一个。如果顺序不必从左到右显示，则可以将柔性方向改为“列”，而不是“行”，并控制容器的高度。否则，我认为没有js的干预是不可能实现的。@toms你能给我一个如何实现的例子吗？@flyingKite我在下面的回答中详细阐述了这一点