Flexbox justify-content 无法与变换比例正常工作

我有一个常规的无序列表项目display: flex and justify-content: space-between应用于它（结果，.first_item触及左边缘.list and .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“不知道”这些物品已经减少。

这是不对的：即使缩小项目，第一个和最后一个项目仍然应该接触容器的左边缘和右边缘。

这是怎么回事以及如何解决这个问题？

一旦你用transform，它会自动在其框内居中。

这是因为初始值transform-origin https://drafts.csswg.org/css-transforms/#transform-origin-property财产是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>

您可以使用以下命令调整变换后的元素的位置left and right on transform-origin.

.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.c​​sswg.org/css-transforms/#transform-origin-property https://drafts.csswg.org/css-transforms/#transform-origin-property