0

I want to display cards in the center with two/three columns and multiple rows. The cards are displayed dynamically. I want to have equal space between each row of cards. I set this attribute fxLayoutAlign="space-between center" in my code. By refering this link https://tburleson-layouts-demos.firebaseapp.com/#/docs. It will not display correctly. There is no space between rows and the last row is not aligned properly with the column. Only the last row is not aligned vertically with the column. When I change the browser window size also the alignment is messed up. These are the versions I am using

Angular version - 2.4.10
"@angular/material": "2.0.0-beta.2",
"@angular/flex-layout@2.0.0-beta.5"

<div fxLayout="row" fxLayoutWrap fxLayoutGap="6rem" fxLayoutAlign="space-between center">
  <md-card  fxFlex.gt-md="40" fxFlex.md="50"  fxFlex.sm="40" fxFlex.xs="100" *ngFor="let data of myData" [style.background]="'lightBlue'">
    <md-card-header>
      <md-card-title>element</md-card-title>
    </md-card-header>

    <md-card-content>
            <h1>Main Content Data</h1>
      <p>
        Lorem Ipsum
      </p>
    </md-card-content>
  </md-card>
</div>

enter image description here

user2301
  • 1,857
  • 6
  • 32
  • 63
  • Questions seeking help ("**why isn't, or how to make, this code working?**") must include the desired behavior, a _specific problem or error and the shortest code necessary_ to reproduce it **in the question itself**. Questions without **a clear problem statement** are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – Asons May 15 '17 at 09:09
  • @LGSon I have added the code and screenshot. My problem is similar to this one http://stackoverflow.com/questions/42550491/angular-2-material-and-flex-layout-alignement. Thank you – user2301 May 15 '17 at 09:26

1 Answers1

0

This sample code worked for me. Added justify-content and margin.

 <div fxLayout="row" fxLayoutWrap  style="padding-bottom: 25px; 
padding-top: 25px;  margin: auto;justify-content: center" >
  <md-card  fxFlex.gt-md="40" fxFlex.md="50"  fxFlex.sm="40" fxFlex.xs="100" *ngFor="let data of myData" [style.background]="'lightBlue'" style="margin:5px;">
    <md-card-header>
      <md-card-title>element</md-card-title>
    </md-card-header>

    <md-card-content>
            <h1>Main Content Data</h1>
      <p>
        Lorem Ipsum
      </p>
    </md-card-content>
  </md-card>
</div>
user2301
  • 1,857
  • 6
  • 32
  • 63