css - 布局 : "flex: 1" is being ignored 的 Ember.js 和 flexbox 问题

Question

我正在将 CSS/HTML/JS 设计从静态 HTML 设计转换为 Ember 应用程序。该设计对所有布局都使用 flexbox。

为了这篇文章，假设我的设计在 flexbox 包装器中有 3 列。左边和右边是 250px 宽，中间设置为“flex: 1”，这样它就用完了所有未使用的空间。左列也是一个 flexbox 包装器，它有四行。其中三行的高度固定，第四行设置为“flex: 1”以用完未使用的空间。

在 Ember 中，我为每个 250 像素的列生成了 2 个组件。中间是我的导出，它呈现我的路线。我已将这些列放入各自的 .hbs 文件中，并将助手放在 application.hbs 中。它们被渲染但“flex:1”似乎在渲染组件时被忽略。这会导致任何本应占用所有未使用空间的东西都没有占用。

请注意，如果我将我的 HTML 文件中的所有代码放入我的 application.hbs 文件中，它可以正常呈现。

如有任何帮助，我们将不胜感激。

谢谢!

Answer 1

解决了这个问题。当使用组件助手时，您必须直接将包装器类应用到助手，否则您最终会得到一个包装器中的包装器或没有包装器的 block ，因为如果没有定义，Ember 将应用默认类

{{main-nav class="main-nav-wrapper"}}