翻译的兄弟之后,Flex项目不会"浮动"

Question

我有一个翻译的flex项目仍然占据其原始空间的问题,以便下面的flex项目不会立即跟随.有关更多详细信息,请参阅JSFiddle或代码段.我希望绿色矩形紧跟在红色之后,以便在边框内可见.遗憾的是,我不能翻译父级,它会溢出:隐藏,以便只有边框内的子项可见.

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

或者一个片段:

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

Answer 1

来自MDN,强调我的:

<transform-function> 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>

另一种方法是将所有元素转换为一起.此方法更具性能(因为它跳过浏览器渲染管道的布局和绘制步骤).有关详细说明,请访问有关渲染性能的文章.

一种可行的方法:

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>