离子3自动调整网格布局

Question

我使用离子网格和一个离子排构建了一个仪表板.离子行包含10-12个离子色谱柱.所以基本上,一旦屏幕宽度被击中,列就开始向下流动.

这一切都很好并且符合预期.但是,当这些列具有不同的宽度和高度时,问题就开始了.我已经定义了3种宽度类型的col:200px,400px和600px.高度也有3种变化200px,400px和600px.因此总体上每个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 Growth 来定义它们的大小。

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

我在这里附上了我所做的事情。就我而言，列号应该是动态的，但具有相同的。