角度材料2卡與靈活佈局重疊海誓山盟

Question

我試圖讓角材2卡工作使用靈活佈局，以便瀏覽器調整大小的列數我渲染變化。我試圖實現類似Google Keep的工作原理。

<div *ngIf="condition == true"> 
    <div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="start start" fxLayoutGap="15px" > 
     <md-card fxFlex="calc(25%+15px)" *ngFor="let d of details"> 
      <md-card-content> 
       Content 
      </md-card-content> 
     </md-card> 
    </div> 
</div>  
<button md-button (click)="condition = !condition">Toggle</button> 

運行this plunker不過，你可以看到，當過一系列的角度材質卡需要包裝，它們重疊一點點。

有誰知道我需要做什麼用flex-layout來獲得下一行在項目之間有一定的餘量嗎？它們具有fxLayoutGap屬性，但似乎只適用於與內容緊鄰的對象之間的水槽，而不在下面或上面。

Answer 1

Johnathon，我感到你的痛苦。即使沒有使用flex-layout，我也一直在努力讓md卡完全按照我的意願行事 - 但我會說它可以完成，但往往會損害可維護性和時間效率。

我沒有爲我自己的目的實現flex-layout，因爲我已經在覈心CSS中使用了一段時間的flex方法。

這不是我的網站的插件，但它是我可以有最好的例子你看看：http://www.weo3.com - 你會在着陸頁上看到，「工作」部分是由卡。這些卡片是基於材質設計的方法的，但被剝離爲我想要的佈局精華。

下面是我用來完成它們的間距和響應的CSS - 請注意「工作」是卡的父容器！

.work { 
    display: flex; 
    flex-direction: row; 
    justify-content: flex-start; 
    flex-wrap: wrap; 
} 

.card { 
    display: flex; 
    flex-direction: column; 
    margin: 10px; 
} 

.card .card-content { 
    flex: 1; 
    padding: 0.25em 0.3em 0; 
} 

.card .card-content p { 
    font-size: 1em; 
    line-height: 1.2; 
    margin-bottom: 0.5em; 
} 


@media only screen and (min-width: 37.50em) { 
    .card { 
    max-width: calc(50% - 20px); 
    } 
} 

@media only screen and (min-width: 75em) { 
    .card { 
    width: calc(33.33333% - 20px); 
    } 
} 

希望，因爲你可以看到，協助卡保持其空間的主要機制之一是寬度的計算方法，直接與保證金相關的聲明。所以，如果你想在一張卡片的每一邊上使用10px的邊距，那麼寬度需要計算出你想要的卡片所佔的屏幕百分比，減去兩個的邊際數量。

FWIW，我發現使用MaterialDesign2的目的是要麼完全滿意它的行爲，要麼儘量減少它的影響，以便享受它。

MaterialDesign2仍處於測試階段，因此隨着代碼庫的不斷髮展，請記住隨着這些代碼庫的不斷髮展和成熟，必須進行調整以保持設計的完整性。