I've been experimenting with angular 2 material and flex-layout in an attempt to create a responsive gallery of elements. Despite spending countless hours on it, I'm still unable to center my elements as desired: https://i.sstatic.net/Hsicy.png
Here's the source code snippet:
<div fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
<md-card fxFlex.gt-md="20" fxFlex.md="28" fxFlex.sm="40" fxFlex.xs="100" *ngFor="let recipe of recipes" [routerLink]="['/details', recipe.id]" class="recipe-card">
<md-card-header>
<md-card-title>element</md-card-title>
</md-card-header>
<img md-card-image src="http://placehold.it/350x200">
<md-card-content>
<p>
Lorem Ipsum
</p>
</md-card-content>
</md-card>
</div>
I have experimented with different values for fxFlexAlign (https://github.com/angular/flex-layout/wiki/API-Documentation) but none seem to achieve the desired result of centering the elements or evenly distributing the space between them.
Is there a solution to this issue?
EDIT
Unfortunately, using justify-content: space-between; does not work well when dealing with a dynamic number of items that wrap onto new lines, resulting in uneven alignment in the last row. Here's an example of what I mean:
.container {
display:flex;
width:100%;
flex-flow:row wrap;
justify-content: space-between;
}
.block {
width:100px;
height:100px;
border:1px solid red;
}<div class="container">
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
... your content
</div>
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
... your content
</div>
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
... your content
</div>
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
... your content
</div>
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
... your content
</div>
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
... your content
</div>
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
... your content
</div>
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
... your content
</div>
</div>