css - Material Angular 填充网格图 block

Question

使用 https://material.angular.io/components/grid-list/overview :

我创建了一个 md-grid-list 应该有 2 cols 并且在每个 md-grid-tile 我想放置一个md-card 应该填满整个图 block 。

目前 md-grid-list 看起来像这样:

html 代码 - 没有第二个 md-card:

  <md-grid-list cols="2" rowheight="2:1">
  <md-grid-tile>
  <md-card class="data-representer-card">
    <md-card-title>Pick up from where you left</md-card-title>
    <md-card-content>
      <p>
        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
        very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
      </p>
    </md-card-content>
    <md-card-actions>
      <button md-button>LIKE</button>
      <button md-button>SHARE</button>
    </md-card-actions>
  </md-card>
  </md-grid-tile>
</md-grid-list>

如何让 md-card 拉伸(stretch)并填充屏幕截图中标记为蓝色的整个区域？

Answer 1

基于@talentedandrew

我花了一段时间才弄清楚如何包含 flex-layout 但现在它按预期工作了:

我依次遵循了这些指南:

• https://github.com/angular/flex-layout/wiki/Developer-Setup

• https://github.com/angular/flex-layout/wiki/Fast-Starts

重构 html 代码后我得到了预期的结果:

  <md-card class="data-representer-card" fxFlex="50">
    <md-card-title>Pick up from where you left</md-card-title>
    <md-card-content>
      <p>
        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
        very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
      </p>
    </md-card-content>
    <md-card-actions>
      <button md-button>LIKE</button>
      <button md-button>SHARE</button>
    </md-card-actions>
  </md-card>

  <md-card class="data-representer-card" fxFlex="50">
    <md-card-title>Pick up from where you left</md-card-title>
    <md-card-content>
      <p>
        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
        very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
      </p>
    </md-card-content>
    <md-card-actions>
      <button md-button>LIKE</button>
      <button md-button>SHARE</button>
    </md-card-actions>
  </md-card>

现在两个卡片元素彼此相邻并且位于 View 的顶部。