如何正確使用@ angular/flex-layout？

Question

我正在使用@angular/flex-layout創建一個Web應用程序。

當屏幕小於600像素（xs）時，我嘗試使左右邊距5％。它在大屏幕上正常工作（當存在fxLayout="row"-佈局時），但不在xs和fxLayout="column"-位置中。

Here is a demonstration in Plunker.

問題：如何使div的不填補剩餘空間的權利，但讓他們只拿90％，5％的偏差左右？

Answer 1

最後，我使用了類似於@Nehal的方法，但是使用ngClass.xs而不是ngStyle.xs，並且它工作正常。

<div fxLayout.xs="column" 
    fxLayout.gt-xs="row" 
    fxFlex.xs="grow" 
    fxFlex.gt-xs="grow"> 
    <div ngClass.xs="section-title-xs-margin" 
     fxFlex.xs="90" 
     fxFlex.gt-xs="25" 
     fxFlex.gt-sm="20" 
     fxFlexOffset.xs="5" 
     fxFlexOffset.gt-xs="5" 
     fxFlexOffset.gt-sm="10"> 
    Left/Top 
    </div> 
    <div ngClass.xs="content-xs-margin" 
     fxFlex.xs="90" 
     fxFlex.gt-xs="63" 
     fxFlex.gt-sm="55" 
     fxFlexOffset.xs="5" 
     fxFlexOffset.gt-xs="2" 
     fxFlexOffset.gt-sm="5"> 
    Right/Bottom 
    </div> 
</div> 

而且在CSS：

.section-title-xs-margin { 
    margin-right: 5%; 
} 

.content-xs-margin { 
    margin-right: 5%; 
} 

Answer 2

我編輯你的運動員，並使用[ngStyle.xs]得到它的工作。

代碼：

@Component({ 
    selector: 'test-app', 
    template: ` 
    <div fxLayout.xs="column" 
    fxLayout.gt-xs="row" 
    class="containerX" 
    [ngStyle.xs]="{'width.%': 90, 'margin-left.%': 5, 'margin-right.%': 5}" 
    style="background-color: grey"> 
    <div style="background-color: blue" 
     fxFlex.xs="90" 
     fxFlex.gt-xs="25" 
     fxFlex.gt-sm="20" 
     fxFlexOffset="5" 
     fxFlexOffset.gt-xs="5" 
     fxFlexOffset.gt-sm="10"> 
     Left/Top 
    </div> 
    <div style="background-color: red" 
     fxFlex.xs="90" 
     fxFlex.gt-xs="63" 
     fxFlex.gt-sm="55" 
     fxFlexOffset="5" 
     fxFlexOffset.gt-xs="2" 
     fxFlexOffset.gt-sm="5"> 
     Right/Bottom 
    </div> 
</div> 
`, 
    styles: [` 
    .containerX { 
     border: solid 1px #b6b6b6; 
     background: skyblue; 
     height: 200px; 
     width: 100%; 
    }` 
] 
}) 
export class TestApp { 

} 

demo

希望這有助於！