使flex项扩展到一行的整个宽度，但在另一行中保持相同的大小

Question

所以基本上，我这里有一个联系人页面，在卡片中显示每个联系人的信息。它基本上是一个带有flex项的flex容器。我希望卡片扩展到第一行的全宽(桌面上连续5张卡片)。我已经设法做到了这一点，但我想要的是所有的卡片都是相同的宽度。例如，如果用户有7个联系人，前5张卡片将很好地显示在第一行，但后两张卡片将扩展到第二行的整个宽度。有没有可能使这些卡片的宽度与其他卡片相同？

​

​

<div class="d-flex flex wrap">
  <div class="contact-card">
  <div>
  <div class="contact-card">
  <div>
  <div class="contact-card">
  <div>
  <div class="contact-card">
  <div>
  <div class="contact-card">
  <div>
</div>

.contact-card {
   flex: 1 1 0;
}

Answer 1

它看起来像是一个简单的Bootstrap布局。我从Bootstrap CSS复制了CSS。

通过将flex:0 0 16.666667%和max-width: 16.666667%;设置为自定义值，可以调整行的宽度(以及相应的列数)。

​

.row {
  display: flex;
  flex-wrap: wrap;
}
.col-2 {
  width: 100%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

/*DEMO*/
*,*::before,*::after{box-sizing:border-box}
.col-2{height:80px;border:1px red solid}

<div class="row">
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
</div>

​