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

标签 css ember.js flexbox

我正在将 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 文件中,它可以正常呈现。

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

谢谢!

最佳答案

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

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

关于css - 布局 : "flex: 1" is being ignored 的 Ember.js 和 flexbox 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37690323/

相关文章:

javascript 汉堡菜单并不总是触发 javascript

ember.js - Ember 组件 - 组件中参数的显式声明

ember.js - 如何使用 ember.js 使文本区域自动增长?

javascript - 将 HTML 元素放在 map 图 block 上

CSS 填充剩余容器宽度

twitter-bootstrap - 自动填充 Bootstrap 网格

Android 浏览器将宽度设置为 100%,而不管应用于元素的边距(即 block 引号)

javascript - 如何添加自动编号表行?

css - Flexbox 元素多行文本溢出

html - 极简图像 slider 包含使用背景图像转换的最低限度的 HTML 和 CSS