所以我有一个大量使用 flexbox 的布局。我一直很享受它，它很棒。请注意，我也大量使用 AngularJS，而且我对 ng-include(或其他东西)的使用可能会导致问题。
问题是我正在使用第 3 方组件绘制网格(具体为 angular-grid)。它仅在从 JavaScript 专门调用时才调整其列的大小，也可以设置为在初始化后这样做一次。
这里的问题是列的大小调整不正确。它们似乎被调整到不同的空间。我可以肯定的是，flexbox 首先在不考虑 flex 的情况下绘制对象，然后在加载内容后，布局会拉伸(stretch)。
假设我的假设是正确的，我希望解决这个问题的方法是找到一个 JavaScript(或 JQuery 或 Angular)事件来监听它何时完成调整大小，然后通知网格它需要重新绘制列。话虽这么说，但我还没有找到这样的事件，所以也许我处理问题的方式有误，或者我只是没有选择最佳搜索词。
为了帮助形象化问题，这里有一个 HTML 示例(网格有点奇怪)。 (style="..."实际上是通过 css 类或 Angular Material 标签定义的 - 请参阅 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>
感谢您的宝贵时间。
最佳答案
如果您的假设是这样，那么您可以尝试 3 件事。
1) 将 flex-basis 添加到您的内部网格 div 以便它立即以适当的大小加载，避免调整大小问题。
2) 在初始化 ag-grid 并将数据添加到您的状态后应用 display: flex。
3) 在加载数据并初始化 ag-grid 后，使用 requestAnimationFrame 方法重绘 ag-grid(这可能是您正在寻找的最接近的东西，特别是等待浏览器重绘完成)
关于javascript - Flexbox 调整大小事件(？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32190058/