使用 flex-wrap:wrap 时，flex-basis 中的转换不起作用

Question

我一直在尝试做这个 animation 没有成功。 有人知道我该如何解决吗？ 谢谢

这是我的 CSS：

.container {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex-basis: 30em;
  overflow: hidden;
  transition: flex-basis 1000ms ease-in-out;
}

.child:hover {
  flex-basis: 100%;
}

还有我的 HTML：

<div class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
  <div class="child">Child 5</div>
</div>

Answer 1

 * { box-sizing: border-box; }.container { display: flex; flex-wrap: wrap; }.child { flex-basis: 20%; overflow: hidden; color: white; transition: flex-basis 1000ms ease-in-out; padding: 20px; background-color: red; }.container:hover.child { flex-basis: 100%; }

 <div class="container"> <div class="child">Child 1</div> <div class="child">Child 2</div> <div class="child">Child 3</div> <div class="child">Child 4</div> <div class="child">Child 5</div> </div>