Ember.js 和 flexbox 的布局问题：“flex: 1”被忽略答案

【问题标题】：Issue with Ember.js and flexbox for layouts: "flex: 1" is being ignoredEmber.js 和 flexbox 的布局问题：“flex: 1”被忽略
【发布时间】：2016-06-07 22:17:42
【问题描述】：

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

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

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

请注意，如果我将 HTML 文件中的所有代码放入 application.hbs 文件中，它会呈现良好。

任何帮助将不胜感激。

谢谢！

【问题讨论】：

标签： css ember.js flexbox

【解决方案1】：

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

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

【讨论】：