/ / Issue mit Ember.js und flexbox für Layouts: "flex: 1" wird ignoriert - css, css3, ember.js, flexbox

Problem mit Ember.js und flexbox für Layouts: "flex: 1" wird ignoriert - css, css3, ember.js, flexbox

Ich bin dabei, ein CSS / HTML / JS-Design von einem statischen HTML-Design in eine Ember-Anwendung umzuwandeln. Das Design verwendet flexbox für alle Layouts.

Um dieser Post willen sagen wir, mein Design hat3 Spalten in einer Flexbox-Hülle. Die linke und die rechte Seite sind 250 Pixel breit und die Mitte ist auf "flex: 1" eingestellt, so dass der gesamte ungenutzte Platz verbraucht wird. Die linke Spalte ist auch ein Flexbox-Wrapper, der vier Zeilen hat. Drei der Reihen haben feste Höhen und die vierte ist auf "flex: 1" gesetzt, um den ungenutzten Platz zu verbrauchen.

In Ember habe ich jeweils 2 Komponenten generiertder 250px Spalten. Die Mitte ist meine Steckdose, die meine Routen darstellt. Ich habe die Spalten genommen und sie in ihre jeweiligen .hbs-Dateien platziert und die Helfer in application.hbs platziert. Sie werden gerendert, aber "flex: 1" scheint ignoriert zu werden, wenn die Komponenten gerendert werden. Dies führt dazu, dass alle, die nicht genutzten Platz einnehmen, dies nicht tun.

Nur als Anmerkung, wenn ich den gesamten Code aus meiner HTML-Datei in meine application.hbs-Datei platziere, wird sie gerendert.

Jede Hilfe würde sehr geschätzt werden.

Vielen Dank!

Antworten:

0 für die Antwort № 1

Gelöst dies. Bei der Verwendung von Komponenten-Helfern müssen Sie die Wrapper-Klasse (n) direkt auf den Helfer anwenden, sonst erhalten Sie einen Wrapper in einem Wrapper oder Blöcke ohne Wrapper, da Ember eine Standardklasse anwendet, wenn keine definiert ist

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