html flex 浮动失效,html – 在翻译的兄弟之后,Flex项目不会“浮动”

从

MDN开始,强调我的：

The CSS data type denotes a function used to modify an element’s appearance.

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

解决此问题的方法是设置动画或修改影响文档流的属性,例如边距.

.parent {

display: flex;

width: 100px;

margin-left: auto;

margin-right: auto;

border: 1px solid black;

}

.child {

flex: 0 0 100%;

}

1

2

3

一种可行的方法：

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

}

1

2

3