fxLayoutAlign =「空間之間的中心」 - 重疊在對齊中的最後一行

我想在兩/三列和多行的中心顯示卡片。卡片動態顯示。我想在每排卡片之間留出相等的空間。我在我的代碼中設置了這個屬性fxLayoutAlign =「space-between center」。通過引用此鏈接https://tburleson-layouts-demos.firebaseapp.com/#/docs。它不會正確顯示。行之間沒有空格，最後一行未與列正確對齊。只有最後一行不與列垂直對齊。當我更改瀏覽器窗口大小時，對齊也會混亂。這些是我使用fxLayoutAlign =「空間之間的中心」 - 重疊在對齊中的最後一行

Angular version - 2.4.10 
"@angular/material": "2.0.0-beta.2", 
"@angular/[email protected]" 

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

來源

2017-05-15 Mythri

問題尋求幫助（「**爲什麼不是，或者如何讓這段代碼的工作？**」）必須包括所期望的行爲，一個_specific問題或錯誤，並在最短的代碼necessary_重現它**在問題本身**。沒有**明確問題陳述**的問題對其他讀者沒有用處。請參閱：[如何創建最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。 – LGSon

@LGSon我已經添加了代碼和截圖。我的問題類似於這個http://stackoverflow.com/questions/42550491/angular-2-material-and-flex-layout-alignement。謝謝 – Mythri

此示例代碼爲我工作的版本。添加了justify-content和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>

來源

2017-05-17 12:12:42 Mythri

fxLayoutAlign =「空間之間的中心」 - 重疊在對齊中的最後一行

回答

相關問題