Flex-layout gutter in both side on mobile

Question

I'm using flex-layout with this code

<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>

and it works fine but now I want to set a gutter of 15px on both side I've tried with

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

but it sets only margin-left.

How can I manage the gutter on both side with the flex-layout breakpoints (I mean without any other extra code)?

Answer 1

You can use ngStyle like this:

<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>

That's the result:

I do not know if fxFlexOffset supports margin-right:

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