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

[ThomasBurleson]

@fxck - The team is intentionally cautious of adding solutions that are either not fully tested or not universal for all browsers.

[fxck]

I think that this negative margin / positive padding has been well tested across multiple grid frameworks and works well in all browsers.

[boneskull]

I wouldn't call this an edge case. Here's an example of this type of usage on CSS Tricks.

Paraphrasing:

<style type="text/css">
  .wrapper { 
    display: flex;
    flex-flow: row;
  }
  
  .wrapper > * {
    padding: 10px; /* gap! */
  }
  
  .left-sidebar, .right-sidebar {
    flex: 1 100%;
  }

  .left-sidebar { 
    order: -1; /* could just give them all numbers, I suppose */
  }
  
  .main { 
    flex: 3 0;
  }

</style>

<div class="wrapper">
  <article>Bacon ipsum dolor amet ham landjaeger</article>
  <aside class="left-sidebar"><!-- links --></aside>
  <aside class="right-sidebar"><!-- annoying ads --></aside>
</div>

Re-implementing this using flex-layout:

<div fxLayout="row" fxLayoutGap="10px">
  <article>Bacon ipsum dolor amet ham landjaeger</article>
  <aside fxOrder="-1"><!-- links --></aside>
  <aside><!-- annoying ads --></aside>
</div>

The <article> tag has a style of margin-right: 10px, and the "links" sidebar has no such margin.

I have no preference for the solution, but wanted to establish WP:N. 😉

[ThomasBurleson]

Will not fix.

[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.}