如何使用动画限制每行的项目？

Question

如何在下面的弹性项目中设置每行的最大项目数？我想用动画制作每行 4 个项目：

.grid-items {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.cell-item {
  padding: 15px;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.cell-item a {
  background-color: #f2f2f2;
  width: 100%;
  height: 200px;
  display: block;
}
.cell-item:hover {
  -webkit-box-flex: 4;
  -ms-flex-positive: 4;
  flex-grow: 4;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}

<div class="grid-items">

  <div class="cell-item">
    <a href="#">
    </a>
  </div>

  <div class="cell-item">
    <a href="#">
    </a>
  </div>

  <div class="cell-item">
    <a href="#">
    </a>
  </div>

  <div class="cell-item">
    <a href="#">
    </a>
  </div>


  <div class="cell-item">
    <a href="#">
    </a>
  </div>

  <div class="cell-item">
    <a href="#">
    </a>
  </div>

  <div class="cell-item">
    <a href="#">
    </a>
  </div>

  <div class="cell-item">
    <a href="#">
    </a>
  </div>

</div>

如果我向 flex 项目添加 25%，动画将不起作用：

.cell-item {
  padding: 15px;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
  -webkit-box-flex: 1 25%;
  -ms-flex: 1 25%;
  flex: 1 25%;
}

有什么想法吗？

Answer 1

据我所知，您有两种可能性。

1 - 添加间隔元素以强制分离。如果您的最大元素数是 12，那么您可以为此使用伪元素（因为您只有 2 个伪元素可用，您最多可以设置 3 行）

.grid-items {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.cell-item {
  padding: 15px;
  transition: all 2s ease;
  flex: 1;
  height: 200px;
  background-color: silver;
  margin: 10px;
}

.cell-item:hover {
  flex-grow: 4;
}
.spacer {
    flex-basis: 100%;
}

<div class="grid-items">
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
  <div class="spacer"></div>
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
</div>

对此的一个细微变化是在 DOM 中稍后放置分隔符，并使用 order 将它们设置到它们所属的位置。这种方法的优点是，如果您希望通过媒体查询更改每行的项目数

.grid-items {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.cell-item {
  padding: 15px;
  transition: all 2s ease;
  flex: 1;
  height: 100px;
  background-color: silver;
  margin: 10px;
}

.cell-item:hover {
  flex-grow: 4;
}
.spacer {
    flex-basis: 100%;
    order: 99;
}

.cell-item:nth-child(n+1):nth-child(-n+4) {
    order: 1;
    background-color: tomato;
}
.cell-item:nth-child(n+5):nth-child(-n+9) {
    order: 3;
    background-color: lightblue;
}
.spacer:nth-last-child(1) {
    order: 2;
}

<div class="grid-items">
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
  <div class="cell-item">
  </div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
</div>