firefox - 在流程面板中垂直添加小部件

Question

我想以垂直方式将小部件添加到流程面板。我已将 display:block css 提供给 flowpanel 和子小部件 display:inline:block。它们垂直放置，但在单个列中。我想要一个像水平流一样的垂直流（首先它填充第一行直到流面板宽度达到并移动到下一行）。我想放置小部件，直到流程面板的高度达到，当它达到时，我想将小部件放置到下一列的第一行。有人可以帮我摆脱困境。

Answer 1

你可以通过两种方式做到这一点。

您可以在代码中进行所有计算，即测量父容器，添加子容器直到超过高度等。这不是最佳解决方案，但它也适用于旧浏览器。

更好的解决方案是使用所有现代浏览器都支持的Flexbox 布局模型。将父级设置为：

display: flex;
flex-direction: column;
flex-wrap: wrap;

然后添加您的孩子。保持儿童为display:block. 您甚至可以添加一些规则来告诉浏览器如何处理列中的空白区域。