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

Question

我正在使用@angular/flex-layout创建一个网络应用程序。

当屏幕小于 600px ( xs) 时，我尝试左右留出 5% 的边距。它在较大的屏幕上正常工作（当有fxLayout="row"-layout 时），但在xsand - 情况下不能fxLayout="column"正常工作。

这是 Plunker 中的演示。

问题：如何使div's 不填充右侧的剩余空间，而是使它们仅占 90%，左右偏移 5%？

Answer 1

最后，我使用了与@Nehal 类似的方法，但ngStyle.xs我没有使用ngClass.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

我编辑了你的 plunker 并让它使用[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 {

}

演示

希望这可以帮助！