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:-code>之间的空格不知道项目已减少。
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.csswg.org/css-transforms/#transform-origin-property
More details in the spec: https://drafts.csswg.org/css-transforms/#transform-origin-property
这篇关于Flexbox调整内容无法正确使用转换比例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!