/ / Issue s Ember.js a flexbox pre rozloženie: "flex: 1" sa ignoruje - css, css3, ember.js, flexbox

Vydanie s nástrojmi Ember.js a flexbox pre usporiadanie: "flex: 1" sa ignoruje - css, css3, ember.js, flexbox

Som v procese prevodu návrhu CSS / HTML / JS zo statického HTML návrhu na aplikáciu Ember. Návrh používa flexbox pre všetky rozloženia.

V záujme tohto príspevku, nechajte povedať, môj dizajn má3 stĺpce vo vnútri flexboxového obalu. Ľavá a pravá strana má šírku 250 pixlov a stred je nastavený na "ohyb: 1", aby vyčerpal celý nevyužitý priestor. V ľavom stĺpci je tiež obal flexbox, ktorý má štyri riadky. Tri riadky majú pevné výšky a štvrtý je nastavený na "ohyb: 1", aby využil nevyužitý priestor.

V Ember som vytvoril 2 komponenty pre každý z nich250 stĺpcov. Stred je moja zásuvka, ktorá robí moje cesty. Vzali som stĺpce a umiestnili ich do príslušných súborov .hbs a umiestnili pomocníkov do aplikácie application.hbs. Sú vykreslené, ale "flex: 1" sa zdá byť ignorované, keď sú komponenty vykreslené. Výsledkom je všetko, čo má zaujať všetok nevyužitý priestor, a to nie.

Rovnako ako poznámka, ak umiestním celý kód z môjho HTML súboru do môjho application.hbs súboru, to vykreslí.

Akákoľvek pomoc by bola veľmi cenená.

Vďaka!

odpovede:

0 pre odpoveď č. 1

Vyriešil to. Ak používate pomocníkov komponentov, musíte použiť pomocnú triedu (-y) priamo na pomocníkovi alebo inak skončíte s obalom v obálke alebo bloky bez obálok, pretože Ember použije predvolenú triedu, ak nie je definovaná

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