Shouldn't fxFlex value be independent of fxLayoutGap (with fxLayout="row")

[victornoel]

The problem I am trying to highlight is the relation between the fxLayoutGap and the fxFlex percentage used with fxLayout="row".
To me, the fxFlex value should a percentage of the available space minus the fxLayoutGap applied inbetween the elements.

So in the following screenshot for example, I would expect to have 2 lines of 4 squares (because 25% is a quarter of 100%):

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

[gabucito]

I believe your problem is when combining fxLayoutWrap and fxLayoutGap. It seems they don't work well together. A temporary workaround would be to set fxFlex="24%", remove fxLayoutGap and use fxLayoutAlign="space-between".
https://plnkr.co/edit/s0hOz0D9q1RY9niHmhm5?p=preview

NOTE: This is not a perfect solution since the Gap will be 1% instead of 10px.

[victornoel]

@gabucito that's my point, there is something bothering with the current way these properties work!

[victornoel]

(I know how to workaround it of course : )

[mackelito]

Shouldn't it also add a space/gap to bottom?
At least for me.. I would expect the result of LayoutGap to look something like this:

[maxime1992]

@mackelito I would expect that too and I asked for it but for some reasons @ThomasBurleson said :

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

[fabiocarneiro]

Any progression on this? This makes the layout highly unusable. Build a grid of items with proper margins is one of the basic things everyone does.

I agree with @mackelito. I would also expect the fxLayoutGap to put gaps in both axis.

[andrew-cunliffe]

Just ran into this problem, I'm not concerned about the gap below - but certainly the combination of gap + wrap + flex is causing some layout annoyance

Without using Gap

    <div fxLayout="row" fxLayoutWrap>
        <mat-card *ngFor="let i of [1, 2, 3, 4, 5, 6, 7, 8, 9]" fxFlex="33%">
            <mat-card-content>
                <div>qwerty</div>
                <div>qwerty</div>
            </mat-card-content>
        </mat-card>
    </div>

With using Gap

    <div fxLayout="row" fxLayoutGap="20px" fxLayoutWrap>
        <mat-card *ngFor="let i of [1, 2, 3, 4, 5, 6, 7, 8, 9]" fxFlex="33%">
            <mat-card-content>
                <div>qwerty</div>
                <div>qwerty</div>
            </mat-card-content>
        </mat-card>
    </div>

Swapping to Align (space-between)

    <div fxLayout="row" fxLayoutAlign="space-between" fxLayoutWrap>
        <mat-card *ngFor="let i of [1, 2, 3, 4, 5, 6, 7, 8, 9]" fxFlex="30%">
            <mat-card-content>
                <div>qwerty</div>
                <div>qwerty</div>
            </mat-card-content>
        </mat-card>
    </div>

As mentioned above space between is kind of ok for the moment, but I'm sure a more complex issue will arise soon... wish I had the answer but didn't want to just plus 1 on others as I do not feel the gap below is a problem, can just add margin-bottom on your div / card to sort that ourselves fine

[Marcidius]

A more complex example is actually pretty easy to dream up. Mostly because I'm running into this issue in my enterprise level web application that my team is building. Take the above example and pretend you actually want to add some cards below that that only take up half of the space.
Even though the percentages add up on the two different measurements (to 90%) the space-between varies because of it. Code and screenshot below:

<div fxLayout="row" fxLayoutAlign="space-between" fxLayoutWrap>
    <md-card *ngFor="let i of [1, 2, 3, 4, 5, 6]" fxFlex="30%" style="margin-bottom: 10px;">
        <md-card-content>
            <div>qwerty</div>
            <div>qwerty</div>
        </md-card-content>
    </md-card>
    <md-card *ngFor="let i of [1, 2, 3, 4]" fxFlex="45%" style="margin-bottom: 10px;">
        <md-card-content>
            <div>qwerty</div>
            <div>qwerty</div>
        </md-card-content>
    </md-card>
</div>

This becomes a problem when you want a page to use the Flex Layout package but you also want uniformity in how the elements are spaced out on the screen. I shouldn't be doomed to making a decision of either... a.) Having all of the elements on the screen, in my use-case it's a form, be required to have the same number of elements on every line or b.) Having inconsistent inner-spacing between them.

[ivanblazevic]

I believe your problem is when combining fxLayoutWrap and fxLayoutGap. It seems they don't work well together. A temporary workaround would be to setfxFlex="24%", remove fxLayoutGap and use fxLayoutAlign="space-between".
https://plnkr.co/edit/s0hOz0D9q1RY9niHmhm5?p=preview

NOTE: This is not a perfect solution since the Gap will be 1% instead of 10px.

it is possible to set Gap as px using calc:

<div fxLayoutAlign="center" fxLayoutWrap fxLayout fxLayoutAlign="space-between">
  <div class="item" fxFlex="0 1 calc(50%-20px)">Item 1</div>
  <div class="item" fxFlex="0 1 calc(50%-20px)">Item 2</div>
  <div class="item" fxFlex="0 1 calc(50%-20px)">Item 3</div>
</div>

cheers!