Flex-макет желоба с обеих сторон на мобильном

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>

, и он работает нормально, но теперь я хочу установить желоб в 15 пикселей с обеих сторон, которые я пробовал с

<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, которая будет автоматически применять поле margin-right вместо margin-left