Flex-layout: fxLayoutWrap fxLayoutGap Margin Issue in last row

[naveedahmed1]

Please take a look at the below plunker and notice the last row:

https://plnkr.co/edit/pBA4A55u3hQVfi1DkGdw?p=preview

Since the last box in the last row is missing the margin-right the boxes in this row are not properly aligned.

As per the documentation of fxLayoutGap it says:

"Note that the last child item will NOT have a margin gap specified; only the inside gaps are specified."

This works great when boxes can be accommodated in one row. But when we are using fxLayoutWrap and we need more than one rows to accommodate boxes the boxes in last row has alignment issue.

To address this, when using fxLayoutWrap, I think it should either add margin right to the last box as well or the margin right should be removed from the last element in each row.

[ThomasBurleson]

@naveedahmed1 - This is an interesting issue.

This is an issue that we should not solve programmatically: to determine the number of elements on a row and adjust the last right-gap accordingly.

The solution, however, is super-easy from a CSS perspective:

Simply add a CSS style [fxFlex]:last-of-type { margin-right:15px; }

Closing as a will-not-fix issue.

[naveedahmed1]

Thank you so much @ThomasBurleson . I think css based solution wont cover all cases, please take a look at the updated plunker

https://plnkr.co/edit/pBA4A55u3hQVfi1DkGdw?p=preview

[ThomasBurleson]

Again you will have to be more specific with your CSS to affect only the sections desired.
I this working plunkr, I use a .align class.

Again, we will not fix this.

[naveedahmed1]

@ThomasBurleson can you please take a look at the updated plunker

https://plnkr.co/edit/XxnF3pXG1MkIrGZfgna3?p=preview

Though adding margin to the last child solves above problem but introduces another problem, as shown in the updated plunker. I understand even this could be handles through css, but don't you think flex-layout should handle the row wrap more gracefully so that we dont have to use such hacks.

[jkossis]

Any update? With the proposed 'align' solution, the wrapped items are not centered, the right will always have more margin with respect to the container. I think an API solution would be desirable, and warranted.

[stoto34]

Is there a solution ? I have the same problem with "padding-right" for the last element.
The last element has no padding in the documentation, I don't understand.

[angular-automatic-lock-bot[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._}