Flexbox的justify-content属性与transform scale一起使用时无法正常工作

Question

我有一个常规的无序列表，应用了display: flex和justify-content: space-between（结果是.first_item接触到.list的左边缘，而.last_item接触到.list的右边缘）：

<ul class='list'>
    <li class='first_item'>Item</li>
    <li class='middle_item'>Item</li>
    <li class='last_item'>Item</li>
</ul>

然而，如果我使用transform: scale(0.5)来缩小这些项目，则会在这两个位置留下空格，就好像justify-content: space-between不知道项目已经被缩小了一样。这是不对的：即使缩小项目，第一个和最后一个项目仍然应该触碰容器的左右边缘。

发生了什么问题，如何解决？

- drake035

Answer 1

使用 transform 缩小元素后，它会自动居中在其盒子内。

这是因为 transform-origin 属性的初始值为 50%，50%（即水平和垂直居中）。

因此，项目与容器的边缘有偏移。

.list {
  display: flex;
  justify-content: space-between;
  border: 1px dashed black;
  padding: 0;
  list-style: none;
}

li {
  transform: scale(0.5);
  border: 1px solid red;
}

<ul class='list'>
  <li class='first_item'>Item</li>
  <li class='middle_item'>Item</li>
  <li class='last_item'>Item</li>
</ul>

你可以通过在 transform-origin 上使用 left 和 right 来调整变换后元素的位置。

.list {
  display: flex;
  justify-content: space-between;
  border: 1px dashed black;
  padding: 0;
  list-style: none;
}

.first_item {
  transform: scale(0.5);
  transform-origin: left;
}

.last_item {
  transform: scale(0.5);
  transform-origin: right;
}

li {
  transform: scale(0.5);
  border: 1px solid red;
}

<ul class='list'>
  <li class='first_item'>Item</li>
  <li class='middle_item'>Item</li>
  <li class='last_item'>Item</li>
</ul>

更多细节请查看规范：https://drafts.csswg.org/css-transforms/#transform-origin-property

- Michael Benjamin

---

你的答案似乎只适用于只有3个项目的情况，但是如果你在flexbox中有更多的项目，那么中心项目之间的间距将比中心和边框元素之间的间距小，因为flexbox实际上并不计算比例变换属性。 - René Martin

有没有办法在缩放变换后强制重新计算 flexbox？这正是我正在努力解决的问题，我希望在缩放变换后能够从新计算 flexbox 的宽度和高度。 - scott dickerson