Flexbox调整大小事件(？)

Question

所以我有一个大量使用flexbox的布局.我一直非常喜欢它,它很棒.作为一个注释,我也在大量使用AngularJS,而我使用ng-include(或其他)可能会导致问题.

问题是我使用第三方组件绘制网格(角度网格是特定的).它只在从JavaScript专门调用时调整其列的大小,并且也可以在初始化后设置为执行此操作.

这里的问题是列没有正确调整大小.他们似乎被重新调整到不同的空间.我非常肯定的是,flexbox首先绘制对象而不考虑flex,然后在加载东西后,布局会延伸.

假设我的假设是正确的,我希望解决这个问题的方法是找到一个JavaScript(或JQuery或Angular)事件,以便在调整大小时进行监听,然后通知网格它需要重绘列.话虽如此,我还没有找到这样的事件,所以也许我正在接近这个问题,或者我可能没有选择最好的搜索词.

只是为了帮助可视化问题,这里是一个HTML示例(网格有点奇怪).(style ="..."实际上是通过css类或Angular Material标签定义的 - 请参见此处.)

<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>

谢谢你的时间.

Answer 1

如果您的假设是这样，那么您可以尝试以下 3 件事。

1) 将 a 添加flex-basis到内部网格div，以便立即加载适当的大小，避免调整大小问题。

display: flex2)初始化 ag-grid 并将数据添加到您的状态后应用。

3）一旦加载数据并初始化ag-grid，就使用requestAnimationFrame方法重新绘制ag-grid（这可能是您正在寻找的最接近的东西，特别是在等待浏览器重新绘制完成时）