移动设备两侧的柔性布局排水沟

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>

但是它只设置了左边距。

我如何管理两侧的排水沟 带有弹性布局断点（我的意思是没有任何其他额外的代码）？

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支持即将推出，它将自动应用   右边距而不是左边距