Question

我有一个常规无序的项目列表，其中justify-content: space-between和.first_item已应用于该项目（因此，.list触及.last_item的左边缘和{{1触及.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是＆＃34;不知道＆＃34;物品已减少。

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

发生了什么以及如何解决这个问题？

Answer 1

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

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

结果，这些项目偏离了容器的边缘。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

您可以使用left上的right和transform-origin来调整已转换元素的位置。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

规范中的更多详细信息：https://drafts.csswg.org/css-transforms/#transform-origin-property

Flexbox证明内容与变换比例无法正常工作

1 个答案: