离子3自动调整电网布局

我已经建立了一个仪表板，使用离子网格和只有一个离子行。离子排包含10-12个离子。所以基本上，只要屏幕宽度被击中，列开始流下来。离子3自动调整电网布局

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

我正在使用dragula能够拖放标题以根据需要调整布局。但是，初始布局总是会渲染一些洞，尽管它们可以通过手动拖放进行填充。

那么，在最初的时候应该采取什么正确的方法来避免布局中的空洞。

来源

2017-09-27 Vik

你能提供一些图像与这个“布局孔”？ –

看到这个https://www.dropbox.com/s/g7hci2r62nbnaku/Screenshot%202017-10-06%2013.50.28.png?dl=0 – Vik

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

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

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

例如。 flex-grow：1 - 对于正常，flex-grow：对于更大的宽度为2。

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

来源

2017-10-06 14:07:36

他们将如何自动调整，如果你拖放一个不同大小的项目从一个放置其他？请记住，变化是可能的宽度以及高度明智。在你的情况下，你似乎假设有几列固定的行可变宽度列 – Vik

离子3自动调整电网布局

回答

相关问题