fix(fxLayoutGap): consider fxLayoutWrap to apply gap logic

[ThomasBurleson]

• margin-right be used with fxLayout="row" fxLayoutWrap fxLayoutGap combinations
• margin-bottom be used with fxLayout="column" fxLayoutWrap fxLayoutGap combinations

fixes #108

[ThomasBurleson]

@here - merge after PR 145.

[ThomasBurleson]

@d3viant0ne - please review.

[maxime1992]

@ThomasBurleson I tried your PR on my demo and it's great 😄

One thing tho, when elements are going to the next line (fxLayoutWrap), they don't have a margin-top.

I think it would be a good idea to apply the gap not only horizontally between elements but also vertically, don't you think ?

(green is OK, red should also have some gap)

[ThomasBurleson]

@maxime1992 - the gap will only be applied along the main-axis.

I am also changing this PR to apply margin-right (layout=row) and margin-bottom (layout=column).

[maxime1992]

Ok I skipped that part, my bad.

If there's no fxLayoutWrap, it's a good idea.

On the contrary, when the fxLayoutWrap is set to wrap, devs will have to apply margins manually instead of simply using fxLayoutGap. So in this case I'm not so sure.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}