Corner 2 materials and Flex layout alignment

Question

I am trying to use angular 2 stuff and flex-layout to create a responsive gallery of elements. After hours and hours, I still cannot focus my elements:

This is the source code:

<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 tried different values ​​for fxFlexAlign( https://github.com/angular/flex-layout/wiki/API-Documentation ), but none of them achieve what I need, i.e. has elements centered or, in other words, distributes the red square space between the right and left sides.

Is there any way to achieve this?

EDIT

, justify-content: space-between; , . , , , :

.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">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
</div>

Answer 1

<div fxLayout="row" fxLayoutWrap fxLayoutGap="2rem" fxLayoutAlign="center">

fxLayoutAlign="center" , .

Answer 2

flexbox spread justify-content: space-between;

.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">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
</div>

Answer 3

, . , css%, .

.sp{
	display: flex;
	justify-content: center;
}

.i{
	width: 23%;
    height: 133px;
    background-color: grey;
    margin: 3px;
    color: #fff;

}

.p{
	  display: flex;
    flex-wrap: wrap;
    width: 56%;
}

<div class="sp">
  <div class="p">
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
</div>
</div>

Answer 4

Answer later, but his work on the dynamic element, I can not find the exact formula

my formula

margin-bottom = (100 - (total item in row * fxFlex on item)) / total space between item in row

Example

margin-bottom = (100 - (5 * 19) ) / 4
margin-bottom = (100 - 95) / 4
margin-bottom = 5 / 4 = 1.25%

In your HTML code

<div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="space-between">
    <!-- margin-bottom = gt-md = 1.25%, md = 6.5% , sm  = 22% !-->
    <md-card fxFlex.gt-md="19" fxFlex.md="29"  fxFlex.sm="39" 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>

CSS

md-card {
  margin-bottom: 6.25%; // md flex 29

  // this commented margin is the responsive margin calculation you must implement
  // margin-bottom: 1.25%; // gt-md flex 19
  // margin-bottom: 22%; // sm flex 39
  // margin-bttom : 2%; // sm flex 49 better use this one
}