/ / Problem z Ember.js i flexbox dla układów: ignorowane jest "flex: 1" - css, css3, ember.js, flexbox

Problem z Ember.js i flexbox dla układów: ignoruje "flex: 1" - css, css3, ember.js, flexbox

Jestem w trakcie przekształcania projektu CSS / HTML / JS ze statycznego projektu HTML w aplikację Ember.Formularz używa flexbox dla wszystkich układów.

Ze względu na ten post, powiedzmy, że mój projekt ma3 kolumny wewnątrz opakowania flexbox. Lewa i prawa strona ma szerokość 250 pikseli, a środek jest ustawiony na "flex: 1", więc wykorzystuje całą niewykorzystaną przestrzeń. Lewa kolumna to również opakowanie flexbox, które ma cztery rzędy. Trzy rzędy mają stałą wysokość, a czwarta jest ustawiona na "flex: 1", aby wykorzystać niewykorzystaną przestrzeń.

W Ember wygenerowałem 2 komponenty dla każdegoz kolumn 250px. Środek jest moim ujściem, który oddaje moje trasy. Wziąłem kolumny i umieściłem je w odpowiednich plikach .hbs i umieściłem pomocników w pliku application.hbs. Są renderowane, ale "flex: 1" wydaje się być ignorowany, gdy komponenty są renderowane. Powoduje to, że wszystkie, które mają zająć całą niewykorzystaną przestrzeń, nie robiąc tego.

Podobnie jak w przypadku, gdy umieszczę cały kod z mojego pliku HTML do mojego pliku application.hbs, renderuje się on poprawnie.

Każda pomoc byłaby bardzo cenna.

Dzięki!

Odpowiedzi:

0 dla odpowiedzi № 1

Rozwiązał to. Używając pomocników komponentów, musisz zastosować klasę (-y) opakowania bezpośrednio do helpera, inaczej skończysz z wrapperem w opakowaniu lub blokami bez wrapperów, ponieważ Ember zastosuje klasę domyślną, jeśli żadna nie zostanie zdefiniowana

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