Html 实现CSS卡高度相等，行上最多3个

我有一个带物化CSS的Angular 4应用程序。 该网页使用卡片，高度可以不同，所以我使用FlexBox，但直到3时才最大化

如果卡的长度相同，则没有问题： 当最小化时，3张牌相邻，变成2张，最后变成1张

但是当牌的高度不一样时，我有一排3张牌，然后是1张牌，然后又是3张牌，这不是我想要的

我怎样才能解决这个问题

HTML代码

 <div class="row ">
    <ng-template  ngFor let-flow [ngForOf]="data">
    <div *ngIf="flow.id !== currFlow.id" class="col s12 m6 l4">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">

          <p>
            <strong><b>{{flow.name}}</b></strong>
          </p>

          <form style="overflow: auto; margin-top: 10px;">
            <div class="input-field" style="float:left; width: 50%">
              <input id="type" type="text" value="{{flow.type}}" readonly>
              <label class="active" for="type">Type</label>
            </div>
            <div class="input-field" style="float: right; width: 50%">
              <input id="update" type="text" value="{{flow.updated_at}}" readonly>
              <label class="active" for="update">Last Update</label>
            </div>
            <div class="input-field" style="float:left; width: 50%">
              <input id="obs-start" type="text" value="{{flow.observation_start}}" readonly>
              <label class="active" for="obs-start">Start Observation</label>
            </div>
            <div class="input-field" style="float: right; width: 50%">
              <input id="obs-end" type="text" value="{{flow.observation_end}}" readonly>
              <label class="active" for="obs-end">End Observation</label>
            </div>
          </form>
        </div>
      </div>
    </div>
      </ng-template>
  </div>

图画

编辑：

我现在这样做：

 <div class="row d-flex" *ngFor="let item of specialData">
    <div *ngFor="let flow of item" class="col s12 m6 l4 d-flex">


.d-flex {
  display: inline-flex;
}

d-flex{
显示：内联flex；
}

因此，对于每个第3个元素，都会显示一行并显示inline flex。 如果最后一行没有3个元素，它就不能工作

1元素/卡片->卡片浮动：右，而不是左。。。

---

2个元素/卡片->一张卡片浮动：右边，另一张放在上面的2张第一张卡片的中间，而不是两张卡片旁边的< < /P> > P>我想问题是你把所有的卡片元素排成一行。根据ngFor提供的索引，尝试将它们拆分为多行元素，例如每三张卡。

我认为问题在于您将所有卡元素放在一行中。根据ngFor提供的索引，尝试将它们拆分为多个行元素，比如每三张卡。

嘿，Fangio，你有CSS吗？@大多数CSS默认为Materialize CSS，但我添加了我的CSS文件，正如你所看到的，我在我的htmlah中也做了一些样式设置，所以你没有当前使用的任何flexbox内容？（抱歉，我没有使用Materialize来知道它默认添加到哪里）我有，但它直到3才最大化，所以我删除了它。你可以使用

flex

并添加4个只占宽度（没有高度）的隐藏项嘿，Fangio，你有CSS吗？@大多数CSS默认为Materialize CSS，但我添加了我的CSS文件，正如你所看到的，我在我的htmlah中也做了一些造型，所以你没有任何你目前正在使用的flexbox东西？（抱歉，我没有使用materialise来知道默认情况下它会添加到哪里）我有，但它直到3才最大化，所以我删除了它。你可以使用

flex

并添加4个只占宽度（没有高度）的隐藏项。我这样做有问题，我编辑了我的问题我这样做有问题，我编辑了我的问题

 <div class="row d-flex" *ngFor="let item of specialData">
    <div *ngFor="let flow of item" class="col s12 m6 l4 d-flex">


.d-flex {
  display: inline-flex;
}