角度材料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仍处于测试阶段，因此随着代码库的不断发展，请记住随着这些代码库的不断发展和成熟，必须进行调整以保持设计的完整性。