折叠弹性项目

Question

我正在尝试制作一些伸缩项目的动画，这些伸缩项目在按比例缩小时应该会彼此折叠。 例如：请参见this pen。

import *

.flex-cont {
  display: flex;
}

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

如您所见，项目之间存在间隙。我希望他们彼此相邻。我该如何实现？

Answer 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);
}