Question

我在翻译的弹性项目仍然占据其原始空间时遇到问题，因此以下弹性项目不会立即跟随。有关更多详细信息，请参阅JSFiddle或代码段。我希望绿色矩形紧跟在红色之后，以便在边框内可见。遗憾的是，我不能翻译父母，它会有溢出：隐藏，以便只有边框内的孩子可见。

这是一个JSFiddle https://jsfiddle.net/3wv9d9dm/

或片段：

＆＃13;

.parent {
  display: flex;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
}

.child {
  flex: 0 0 100%;
}

＆＃13;

<div class="parent">
  <div class="child" style="background-color:red;transform:translateX(-100%);"><h1>1</h1></div>
  <div class="child" style="background-color:green;"><h1>2</h1></div>
  <div class="child" style="background-color:blue;"><h1>3</h1></div>
</div>

＆＃13;

Answer 1

来自MDN，强调我的：

＆lt; transform-function＆gt; CSS数据类型表示用于修改元素外观的函数。

转换元素只会修改外观，而不是文档流中的位置。这意味着即使元素似乎已经移动了它在DOM中的位置，它仍继续影响兄弟/其他元素，因为它的物理尺寸在转换之前保持不变。

解决此问题的方法是动画或修改影响文档流的属性，例如margin。

.parent {
  display: flex;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
}

.child {
  flex: 0 0 100%;
}

<div class="parent">
  <div class="child" style="background-color:red;margin-left:-100%;">
    <h1>1</h1>
  </div>
  <div class="child" style="background-color:green;">
    <h1>2</h1>
  </div>
  <div class="child" style="background-color:blue;">
    <h1>3</h1>
  </div>
</div>

另一种方法是将所有元素转换为一起。此方法性能更高（因为它会跳过浏览器呈现管道的布局和 paint 步骤）。 Visit this article on Rendering Performance for a detailed explanation

一种可行的方法：

let children = document.querySelectorAll('.child');

[].forEach.call(children, (child) => {
  child.style.transform = 'translate(-100%)';
});

.parent {
  display: flex;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
}

.child {
  flex: 0 0 100%;
}

<div class="parent">
  <div class="child" style="background-color:red;">
    <h1>1</h1>
  </div>
  <div class="child" style="background-color:green;">
    <h1>2</h1>
  </div>
  <div class="child" style="background-color:blue;">
    <h1>3</h1>
  </div>
</div>

Flex项目没有＆＃34;浮动＆＃34;翻译后的兄弟姐妹

1 个答案: