1

我正在尝试使用 flex-layout 让 Angular Material 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>

不过，运行这个 plunker，你可以看到当需要包装一系列 Angular Material 卡片时，它们会重叠一点。

有谁知道我需要用 flex-layout 做什么才能让下一行在项目之间有一些边距？它们具有该fxLayoutGap属性，但这似乎仅适用于紧邻内容的对象之间的排水沟，而不适用于下方或上方。

4

1 回答 1

2

乔纳森，我感觉到你的痛苦。即使不使用 flex-layout，我也很难让 md-card 完全按照我的意愿行事——但我会说这是可以做到的，但通常会损害可维护性和时间效率。

我没有为我自己的任何目的实现 flex-layout，因为我在核心 CSS 中使用了 flex 方法有一段时间了。

这不是我网站的插件，但它是我可以让您查看的最佳示例：http ://www.weo3.com - 您将在登录页面上看到，“工作”部分由牌。这些卡片基于Material Design 的方法，但被精简为我想要的布局本质。

这是我用来完成它们的间距和响应能力的 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，那么宽度需要计算您希望卡片占据的屏幕百分比，减去边距量乘以 2。

FWIW，我发现使用 MaterialDesign2 要么对其行为完全满意，要么将其影响降至最低，以便享受它。

MaterialDesign2 仍处于测试阶段，因此当您继续使用此类代码库时，请记住，随着这些代码库的发展和成熟，可能必须进行调整以保持设计的完整性。

于 2017-04-03T22:02:50.887 回答