ionic 3 自动调整网格布局

Posted 2023-03-05

【中文标题】ionic 3 自动调整网格布局

【英文标题】：ionic 3 auto adjust layout on the grid

【发布时间】：2018-03-08 13:33:47

【问题描述】：

我已经使用 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 能够拖放标题以根据需要调整布局。但是，尽管可以通过手动拖放来填充，但初始布局总是会呈现一些孔。

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

【问题讨论】：

你能提供一些带有这个“布局中的洞”的图片吗？

看到这个dropbox.com/s/g7hci2r62nbnaku/…

【参考方案1】：

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

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

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

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

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

【讨论】：

如果您将不同大小的项目从一个地方拖放到另一个地方，它们将如何自动调整？请记住，宽度和高度都可能发生变化。在您的情况下，您似乎假设很少有固定行具有可变宽度的列