移动设备两侧的 Flex-layout gutter

Question

我在这段代码中使用 flex-layout

<div class="auth" fxLayout>
  <div class="auth__hint" fxHide.xs="true" fxFlex="50%">Item 1</div>
  <div class="auth__form" fxFlex="50%" fxFlex.xs="100%">
    <router-outlet></router-outlet>
  </div>
</div>

它工作正常但现在我想设置一个 15px 的装订线在双方我都尝试过

<div class="auth__form" fxFlexOffset.xs="15px" fxFlex="50%" fxFlex.xs="100%">
    <router-outlet></router-outlet>
</div>

但它只设置了 margin-left。

如何管理两侧的排水沟使用 flex-layout 断点（我的意思是没有任何其他额外代码）？

Answer 1

您可以这样使用 ngStyle：

<div class="auth" fxLayout>
  <div class="auth__hint" fxHide.xs="true" fxFlex="50%">Item 1</div>
  <div class="auth__form" fxFlex="50%" fxFlex.xs="100%" ngStyle.xs="margin: 0 15px;">
    <router-outlet></router-outlet>
  </div>
</div>

这是结果：

不知道fxFlexOffset是否支持margin-right：

RTL support is coming soon, which will automatically apply margin-right instead of margin-left

移动设备两侧的 Flex-layout gutter

Flex-layout gutter in both side on mobile

angular

angular-flex-layout