fxLayoutGap and fxFlexOrder

[MihailoVasovic]

I have issue with fxLayoutGap when i set fxFlexOrder on a div element.As you can see, there is gap between item 1 and item 3, but no gap between item 3 and item 2 or item 4 and item 5. Am I doing something wrong or is this a bug?

@Component({
  selector: 'test-app',
  template: `
    
    <div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0">
  <div class="item item-1" fxFlex="30%">Item 1</div>
  <div class="item item-2" fxFlex="30%" fxFlexOrder="3" >Item 2</div>
  <div class="item item-3" fxFlex="30%">Item 3</div>
</div>

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

[ThomasBurleson]

fxLayoutGap applies a margin-right gap for fxLayout=='row'... for all items except the last item.

The issue you have identified is that the Item 3 is no longer the last time when fxFlexOrder is used. When flexOrder is used the DOM order does not change; instead only the FlexBox flow layout order changes...

fxLayoutGap has no current knowledge/awareness on this feature.

To resolve this issue, fxLayoutGap would need to sort the list of child DOM elements by their computed order styling. My current worries is that this edge-case fix would affect the performance within fxLayoutGap.

[macjohnny]

@ThomasBurleson this problem could easily circumvented with the solution suggested in #165 (comment)

[fxck]

@macjohnny I haven't really thoroughly read thru #165 but it seems like the same thing I suggested here #134 / #134 (comment) but I was kinda shut down / ignored

also cc @Jonatthu

[Jonatthu]

@fxck http://gridlex.devlint.fr/ Use this library for the flexbox grid system until this library know that this is essential and necessary, I will this library just for basic stuff but for more complex layouts like my example on plunkr http://plnkr.co/edit/Lu2xQIm0F5ONxaMBHIn0?p=preview using this does not worth it, too many steps with custom css and rules for achieve a simple grid system