2016-06-07 50 views
0

我正在將CSS/HTML/JS設計從靜態HTML設計轉換爲Ember應用程序。該設計使用flexbox進行所有佈局。Ember.js和flexbox用於佈局問題:「flex:1」被忽略

爲了這篇文章的緣故,我們可以說我的設計在flexbox包裝內有3列。左右寬度爲250px,中間設置爲「flex:1」,以便用盡所有未使用的空間。左欄也是一個flexbox包裝,它有四排。其中三行具有固定高度,第四行設置爲「flex:1」以用完未使用的空間。

在Ember中,我爲每個250px列生成了2個組件。中間是我的出口,它呈現我的路線。我已經把列放在他們各自的.hbs文件中,並將幫助器放在application.hbs中。渲染它們時,「flex:1」在渲染組件時似乎被忽略。這導致任何應該佔用所有未使用的空間,而不是這樣做。就像一個筆記,如果我把我的HTML文件中的所有代碼放到我的application.hbs文件中,它就會呈現很好的效果。

任何幫助將不勝感激。

謝謝!

回答

0

解決了這個問題。當使用組件幫助程序時,您必須直接將包裝類應用於幫助程序,否則您將最終將包裝程序包裝在一個或多個沒有包裝程序的包裝中,因爲如果沒有定義,則Ember將應用默認類

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