fxLayoutGap and fxFlexOffset don't work together

[mohlendo]

It seems that only you can have either Gap or offset but not both. See reproducer for details:

https://stackblitz.com/edit/angular-material-flex-layout-seed-tqyekw

[CaerusKaru]

This is an interesting issue, and I've been punting it for a reason. There are two obvious solutions to the problem:

1. We can have fxLayoutGap check for fxFlexOffset children, and simply apply addition to get the margin values, then have fxFlexOffset be a no-op if it has a fxLayoutGap parent
2. We can do the same, but reverse the direction

The only relevant question then becomes: how do we handle different responsive aliases, ie how do we coordinate the activated values? There may be an obvious solution to this too, but until I find it this issue remains in limbo.

[CaerusKaru]

Ok this is actually a lot simpler than I led on about, because fxFlexOffset and fxLayoutGap work in opposite directions (i.e. when gap goes left, offset goes right). The issue is that gap is clearing out all of the margin stylings right after flex-offset gets applied, resulting in flex-offset not applying anything.

The fix, which will come after #900 lands, is to get pre-existing margin stylings and intelligently cancel them out. This part will require some thought, but it's a lot more straightforward than my previous comment.