Flexbox justify-content 不适用于变换比例答案

【问题标题】：Flexbox justify-content not working properly with transform scaleFlexbox justify-content 不适用于变换比例
【发布时间】：2017-06-15 01:06:02
【问题描述】：

我有一个应用了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) 缩小项目，现在这两个位置有一个空格，就好像justify-content: space-between“不知道”项目已被缩小。

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

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

【问题讨论】：

标签： css flexbox css-transforms

【解决方案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

【讨论】：

您的答案似乎适用于您只有 3 个项目的情况，但是如果您在 flexbox 中有更多项目，则中心项目之间的间距将小于中心之间的空间和边框元素，因为 flexbos 确实不使用缩放变换属性进行计算。
是否有强制弹性盒在缩放变换后重新计算？这正是我正在努力解决的问题，我希望在缩放变换后计算 flexbox 的宽度和高度