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

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) 缩小项目，现在在这两个位置有一个 space，就好像 justify-content: space-between 是 "unaware" 一样被减少了。

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

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

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

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

Flexbox justify-content not working properly with transform scale

css

flexbox

css-transforms