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调整大小事件（？）

回答

相关问题