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

【问题标题】：Transition in flex-basis not working when using flex-wrap:wrap使用 flex-wrap:wrap 时，flex-basis 中的转换不起作用
【发布时间】：2022-01-30 02:33:41
【问题描述】：

我一直在尝试制作这个动画，但没有成功。有人知道我该如何解决吗？谢谢

这是我的 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>

【问题讨论】：

仅供参考，有一个错字：fex-wrap
我不确定你想要实现什么，但你的 .child 元素有 color: white 所以你不会看到太多，除非你应用了一些背景颜色。
感谢 gru，刚刚纠正了错字。我也摆脱了颜色，那不是问题。问题是当将 flex-basis 动画设置为 100% 时，我的孩子的宽度没有增长到全宽行
您的动画运行良好。我认为我们只是对我们在这里想要实现的目标感到困惑。我将border-right: 1px solid black; 添加到您的.child 课程中，当我将单个孩子悬停时，一切正常。你想让它们在悬停时都是 100% 宽度吗？如果是这样的话，Arman 有你的答案。
我一直在尝试做这个动画，但没有成功。什么动画？

标签： html css flexbox css-transitions

【解决方案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>

【讨论】：