折叠弹性项目答案

【问题标题】：Collapse flex items折叠弹性项目
【发布时间】：2018-08-14 17:55:33
【问题描述】：

我正在尝试为一些弹性项目设置动画，当它们按比例缩小时，它们应该彼此并排折叠。例如：见this pen。

.flex-cont {
  display: flex;
}

.flex-item {
  margin: 0 10px;
  background: red;
  padding: 10px;
  transform: scale(0.25);
}

<div class='flex-cont'>
  <div class='flex-item'>
    Test
  </div>
  <div class='flex-item'>
    Test
  </div>
  <div class='flex-item'>
    Test
  </div>
</div>

如您所见，项目之间存在间隙。我希望他们就在彼此身边。我怎样才能做到这一点？

【问题讨论】：

这就是transform: scale() 的工作方式。您将需要更改宽度。
设置宽度没有帮助。差距仍然存在。
您可以使用position 或transform: translate 在元素缩小时重新定位它们吗？
我不能完全理解你的问题，但我注意到它们之间有 10px 的边距。您的转换必须将其设置为 0。
你不能用 transform 来做到这一点，因为它是纯粹的视觉元素实际上并没有变小......它只是画得更小.

标签： css flexbox css-transitions

【解决方案1】：

您需要做的就是将.flex-item 的保证金设为负数。从您的示例中，将其设置为...

  .flex-item {
      margin: 0 -13px;
      background: red;
      padding: 10px;
      transform: scale(0.25);
   }

成功了。

编辑

如果你想保持最左边的项目的位置那么......

.flex-item {
    margin:0 -46px 0px 10px;
    background:red;
    padding:10px;
    transform:scale(0.25);
}

【讨论】：

hmmm 2 票否决，没有人解释原因。完全符合 op 的要求。有时一定会喜欢这个网站...