Flexbox調整大小事件（？）

所以我有一個大量使用flexbox的佈局。我一直很享受它，它很棒。作爲說明，我還大量使用AngularJS，並且可能我使用ng-include（或其他）可能會導致問題。Flexbox調整大小事件（？）

問題是我正在使用第三方組件來繪製一個網格（angular-grid是特定的）。它只在調用JavaScript時調整列的大小，也可以在初始化後設置一次。

這裏的問題是列沒有正確調整大小。它們似乎調整到了不同的空間。我很確定發生的事情是，flexbox首先繪製沒有考慮flex的對象，然後在加載之後，佈局會延伸。

假設我在我的假設中是正確的，我期望這個解決方案將找到一個JavaScript（或JQuery或Angular）事件來監聽調整大小的時間，然後通知網格它需要重新繪製列。話雖如此，我還沒有發現這樣的事件，所以也許我正在接近這個問題，或者我可能沒有選擇最好的搜索條件。

爲了幫助可視化問題，下面是一個HTML示例（網格有點奇怪）。（樣式=「...」通過CSS類或角材質標籤實際上被定義 - 見here）

<div style="display: flex; flex-direction: column;"> 
    <h1>Example Fixed Width Tag</h1> 
    <div style="position: relative; flex: 1"> 
    <div ag-grid="definition" style="width: 100%; height: 100%; position: absolute;"> 
    <!-- This is where the grid is drawn. --> 
    <!-- The position: absolute is done because the grid requires the div here have --> 
    <!-- a height and width property. --> 
    </div> 
    </div> 
</div>

感謝您的時間。

來源

2015-08-24 Daphoa

最接近的AG-網我無法真正回答一個解決方案，但想要添加另一個數據點：在嘗試調整畫布大小以匹配包裝元素時，我遇到了類似EmberJS的問題。當元素使用flex時，調整大小將不適合確切的尺寸，但移除flex會立即使其工作。 – ferrouswheel

如果你設置min-width：1px;與** flex：1 **的div是否有效？ – r3plica

恐怕沒有辦法知道瀏覽器何時完成重繪，所以您的選項僅限於執行一些可見性技巧（隱藏網格，直到知道所有數據都在那裏）或使用$強制重繪時間到。 – n1313

如果您認爲是這種情況，那麼您可以嘗試3件事。

1）添加一個flex-basis到你的內部網格div，以便它適當的大小加載蝙蝠，避免調整大小的問題。

2）初始化ag-grid並將數據添加到您的狀態後應用display: flex。

3）使用重繪方法一旦數據被加載和AG-網格初始化（這可能是因爲到目前爲止，您正在尋找特定的等待borwser重繪完）

來源

2017-01-20 17:20:36 mindfullsilence

Flexbox調整大小事件（？）

回答

相關問題