ionic 3 自动调整网格布局

Question

我已经使用 ion-grid 和一个 ion-row 构建了一个仪表板。 ion-row 包含 10-12 ion-col。所以基本上，一旦屏幕宽度被击中，列就会开始向下流动。

这一切都很好，正如预期的那样。但是，当这些列的宽度和高度不同时，问题就开始了。我已经定义了 3 种宽度类型的 col：200px、400px 和 600px。高度也有 200px、400px 和 600px 3 种变化。所以总的来说，每个 col 可以是 1*1、2*1、1*2、2*2、3*1 和 3*2 大小。

我使用 Dragula 能够拖放标题以根据需要调整布局。但是，尽管可以通过手动拖放来填充，但初始布局总是会呈现一些孔。

那么，在最初的时候应该如何处理它以避免布局中的漏洞。

Answer 1

您可能可以使用 css flex grow。每行使用一个父 div 并将 css 设置为

.row {
  display: flex;
  justify-content: center;
  align-items: center
}

对于每一列，使用 flex grow 来定义它们的大小。

例如。 flex-grow: 1 - 正常，flex-grow: 2 更大宽度。

在这里我附上了我所做的。在我的情况下，列号应该是动态的，但与。