Angular 如何将卡片分成几行，每行有4张卡片

我想制作一个类似于电子商务的网站，我使用Angular和MdBootstrap UI工具包

假设我有18张牌，我想要4行4张牌，最后一行应该有2张牌。 我的卡片数据来自后端的json格式

但是我得到了这个输出

我想要的是这个

我目前拥有的代码

html:-

<div class="container">
  <div class="row" *ngFor='let row of grid'>
    <div class="col" *ngFor='let c of row'>
      <div style="margin: 10px">
        <mdb-card>
          <!--Card image-->
          <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg" alt="Card image cap"></mdb-card-img>
          <!--Card content-->
          <mdb-card-body>

            <!--Title-->
            <mdb-card-title>
              <h4>{{c}}</h4>
            </mdb-card-title>

            <!--Text-->
            <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
              content.
            </mdb-card-text>

            <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
          </mdb-card-body>
        </mdb-card>
      </div>
    </div>
  </div>
</div>

export class HomeComponent implements OnInit {
  cards: number;
  grid: number[][];
  constructor() {}

  ngOnInit() {
    this.cards = 18;
    this.gridgenerator();
  }

  gridgenerator(): number[][] {
    let last = this.cards % 4;
    let rows =
      this.cards % 4 === 0
        ? new Array(Math.floor(this.cards / 4))
        : new Array(Math.floor(this.cards / 4 + 1));
    this.grid = new Array(rows);
    for (let r = 0; r < rows.length; r++) {
      if (r === rows.length - 1) {
        this.grid[r] = new Array(last);
      } else {
        this.grid[r] = new Array(4);
      }
    }
    console.log(this.grid);

    return this.grid;
  }
}

{{c}}
一些快速示例文本，建立在卡片标题上，并构成卡片标题的大部分
内容。

ts:-

<div class="container">
  <div class="row" *ngFor='let row of grid'>
    <div class="col" *ngFor='let c of row'>
      <div style="margin: 10px">
        <mdb-card>
          <!--Card image-->
          <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg" alt="Card image cap"></mdb-card-img>
          <!--Card content-->
          <mdb-card-body>

            <!--Title-->
            <mdb-card-title>
              <h4>{{c}}</h4>
            </mdb-card-title>

            <!--Text-->
            <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
              content.
            </mdb-card-text>

            <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
          </mdb-card-body>
        </mdb-card>
      </div>
    </div>
  </div>
</div>

export class HomeComponent implements OnInit {
  cards: number;
  grid: number[][];
  constructor() {}

  ngOnInit() {
    this.cards = 18;
    this.gridgenerator();
  }

  gridgenerator(): number[][] {
    let last = this.cards % 4;
    let rows =
      this.cards % 4 === 0
        ? new Array(Math.floor(this.cards / 4))
        : new Array(Math.floor(this.cards / 4 + 1));
    this.grid = new Array(rows);
    for (let r = 0; r < rows.length; r++) {
      if (r === rows.length - 1) {
        this.grid[r] = new Array(last);
      } else {
        this.grid[r] = new Array(4);
      }
    }
    console.log(this.grid);

    return this.grid;
  }
}

导出类HomeComponent实现OnInit{
卡片：号码；
网格：编号[]；
构造函数（）{}
恩戈尼尼特（）{
这张卡=18；
这个.gridgenerator（）；
}
gridgenerator（）：编号[][]{
让last=this.cards%4；
让争吵=
此值为%4==0
？新阵列（数学地板（this.cards/4））
：新阵列（数学层（this.cards/4+1））；
this.grid=新数组（行）；
for（设r=0；r

为了让代码正常工作，您需要定义每张卡片的宽度，而不仅仅是边距

定义“无宽度”允许

div

在块级别占用所有可用空间，这就是最后两张卡的情况。只要有机会，它就会扩张，因为它的孩子需要空间

使用

显示：flex和
柔性包裹：包裹以及卡片的确定宽度将为您提供所需的结果。您可能需要设置
justify content
，以满足您的需求

现在，使用flex很难在一行中只保留四张（或n张）卡片，因为您的屏幕大小与卡片大小的比率可能会有所不同，但您可以在所有卡片上设置一个计算宽度的父级，以确保一次只能有4个子级。

我做了一把小提琴给你检查。尝试展开“结果”窗口并重新运行以查看我正在谈论的内容）

检查参考。
这里是一个，仅使用flex属性

host元素是一个flex容器，具有以下css属性：

：主机{
显示器：flex；
柔性包装：包装；
}

而mdb卡是具有以下属性的弹性项：

mdb卡{
利润率：10px；
弹性基准：计算（25%-2*10px）；//25%减去左右边距。
}

不需要.row和.col元素。
使用CSS flexbox来实现这一点。@AakashVerma-Aakash，您能用一个代码示例详细说明一下吗？@AakashVerma我如何确保flexbox最多只能有4张卡出现在一行中？谢谢Aakash，但我不想定义每张卡的宽度和高度，因为这样会降低整个设置的响应性。很棒的参考书，但很高兴你喜欢它。在rem或%中定义的宽度始终是响应的。就连JavaScript都无法帮助您实现这一点。