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>

Вот и результат:

https://s tackru.com/images/12b09b50fe8df339a5d6f72633fd8936e9ad0076.gif

Я не знаю, поддерживает ли fxFlexOffset margin-right:

Поддержка RTL в ближайшее время, которая будет автоматически применять поле справа-слева вместо поля слева