Flexbox调整内容无法正确使用转换比例 [英] Flexbox justify-content not working properly with transform scale

问题描述

我有一个显示为的项目的常规无序列表：flex 和 justify-content：空格 （结果 .first_item 触及 .list 和的左边缘。 last_item 触摸 .list ）的右边缘：

I have a regular unordered list of items with display: flex and justify-content: space-between applied to it (as a result, .first_item touches the left edge of .list and .last_item touches the right edge of .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：之间的空格不知道项目已减少。

However, if I shrink the items using transform: scale(0.5), there is now a space at these two locations, as if justify-content: space-between was "unaware" that the items have been reduced.

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

This isn't right: even when shrinking the items, the first and last item should still touch the left and right edges of the container.

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

What's going on and how to fix that problem?

推荐答案

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

Once you scale down the element with the transform, it is automatically centered within its box.

这是因为 transform-origin 属性是 50％，50％（即，水平居中和垂直居中）。

This is because the initial value of the transform-origin property is 50%, 50% (i.e., centered horizontally and vertically).

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

As a result, the items are offset from the edges of the container.

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

您可以在<$ c上使用向左和向右调整转换后的元素的位置$ c> transform-origin 。

You can adjust the position of the transformed element with 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

More details in the spec: https://drafts.csswg.org/css-transforms/#transform-origin-property

这篇关于Flexbox调整内容无法正确使用转换比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！