Question

我使用display: flex的容器并缩放到网站的宽度。出于美学原因，容器的内容是div元素内的几个链接，transform:scale(1.5,1)。然而，flexbox似乎忽略了CSS变换的缩放，当它们变大时，它们只是重叠而且也不会绕行（即使使用set flex-wrap: wrap）。例如：

#flexbox-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  height: 100px;
  width: 400px;
  border: 1px solid black;
}

.inner-content {
  transform-origin: left;
  transform: scale(1.5, 1);
  background: grey;
  border: 1px solid red;
  height: 98px;
  width: 98px;
  /* 98px since the border gets added around resulting in 100px */
  opacity: 0.5;
}

<div id="flexbox-container">
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
</div>

有人可能知道如何使用转换后的尺寸计算弹性箱吗？

Answer 1

您应该使用flex-grow代替transform:scale1.5,1)。

这是Fiddle

Answer 2

我能够通过CSS image resize percentage of itself?中的答案来解决我的问题。

对于flex元素的大小，我使用缩放字体大小的文本的隐藏版本（这要求您知道当前字体大小并将其乘以变换比例）。实际转化的元素获得position:absolute并位于left:0。这是结果：

#flexbox-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 250px;
  
  border: 1px solid black;
}

.inner-content {
  position: relative;

  background: grey;
  border: 1px solid red;
  opacity: 0.5;
}

.inner-content .fake {
  float: left;
  visibility: hidden;
  width: auto;
  font-size: 1.67rem;
  height: 1.5ex;
}

.inner-content .span_wrap {
  position: absolute;
  left: 0;
  display: inline-block;
  transform-origin: left;
  transform: scale(1.67, 1);
}

<div id="flexbox-container">
  <div class="inner-content">
    <span class="fake">
      Lorem
    </span>
    <div class="span_wrap">
      Lorem
    </div>
  </div>
  <div class="inner-content">
    <span class="fake">
      ipsum
    </span>
    <div class="span_wrap">
      ipsum
    </div>
  </div>
  <div class="inner-content">
    <span class="fake">
      dolor
    </span>
    <div class="span_wrap">
      dolor
    </div>
  </div>
  <div class="inner-content">
    <span class="fake">
      sit
    </span>
    <div class="span_wrap">
      sit
    </div>
  </div>
  <div class="inner-content">
    <span class="fake">
      amet
    </span>
    <div class="span_wrap">
      amet
    </div>
  </div>
</div>

flex显示忽略内容的缩放变换

2 个答案: