这是display:contents;
的完美用例
display: contents
导致元素的子元素看起来像是元素父元素的直接子元素,而忽略了元素本身。当使用CSS网格或类似布局技术时应忽略包装元素时,这很有用。
.container {
display:flex;
}
.one {
display:contents;
}
.one p:first-child {
order:2;
}
<div class="container">
<div class="one">
<p>Content 1</p>
<p>Content 3</p>
</div>
<p>Content 2</p>
</div>