離子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自動調整電網布局

回答

相關問題