Flex-layout: 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 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.

[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!

[NELBNL]

@Marcidius the first set of cards leave 2x 5% space per row, and the second set of cards leave 1x 10% space per row. The gap in the second set of cards is much wider, but it's the same as the sum of gaps in the first set of cards. To me that seems to be working as intended.

However, what annoys me is that the spacing (or layout gap) doesn't apply for the cross axis. I now too have to use a style margin for bottom. Hopefully there will be a solution to this in the near future.

[CaerusKaru]

Along with #134, we're looking into ways of augmenting fxLayoutGap to provide exactly that functionality. Unfortunately a lot of the methods for achieving this are pretty hackish, whereas the official CSS properties (e.g. row-gap) are still experimental, and won't be backported to IE11. So at this point we just need to pick the least of all evils.

[CaerusKaru]

I've submitted a preliminary PR for this, please see #667. If any of you have comments on that solution, we'd welcome them on that PR.

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