使用 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>