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

概述我有一个翻译的flex项目仍然占据其原始空间的问题,以便下面的flex项目不会立即跟随.有关更多详细信息,请参阅JSFiddle或代码段.我希望绿色矩形紧跟在红色之后,以便在边框内可见.遗憾的是,我不能翻译父级,它会溢出：隐藏,以便只有边框内的子项可见. 这是一个JSFiddle https://jsfiddle.net/3wv9d9dm/ 或者一个片段： .parent { display: 我有一个翻译的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 >  <div  ><h1>1</h1></div>  <div  ><h1>2</h1></div>  <div  ><h1>3</h1></div></div>

解决方法 从 MDN开始,强调我的：

The <transform-function> 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%;}

<div >  <div  >    <h1>1</h1>  </div>  <div  >    <h1>2</h1>  </div>  <div  >    <h1>3</h1>  </div></div>

另一种方法是将所有元素转换为一起.此方法更具性能(因为它跳过浏览器渲染管道的布局和绘制步骤). 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 >  <div  >    <h1>1</h1>  </div>  <div  >    <h1>2</h1>  </div>  <div  >    <h1>3</h1>  </div></div>

总结

以上是内存溢出为你收集整理的html – 在翻译的兄弟之后,Flex项目不会“浮动”全部内容，希望文章能够帮你解决html – 在翻译的兄弟之后,Flex项目不会“浮动”所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。