忽略弹性容器子项，但不忽略孙项

Question

我有一些孩子的简单 flex 元素，如下所示：

.container{
display: flex;
flex-wrap: wrap;
}
.container div.flex-box{
width: 200px;
margin: 20px;
padding: 20px;
font-size: 40px;
border: 1px solid;
}

<div class='container'>
<div class='flex-box'>one</div>
<div class='flex-box'>two</div>
<div class='flex-box'>three</div>
<div class='flex-box'>four</div>
<div class='flex-box'>five</div>
<div class='flex-box'>six</div>
</div>

我正在使用弹性包装，因此，当屏幕变小时，它们会堆叠。

现在，我想使用 ajax 调用重新加载第四和第五个元素来重新加载这两个元素，为此我需要将两个子元素放入容器中，但是当我这样做时，它变成了一个新的 flex 孩子

.container{
display: flex;
flex-wrap: wrap;
}
.container div.flex-box{
width: 200px;
margin: 20px;
padding: 20px;
font-size: 40px;
border: 1px solid;
}

<div class='container'>
<div class='flex-box'>one</div>
<div class='flex-box'>two</div>
<div class='flex-box'>three</div>
<div class='subcontainer'>
<div class='flex-box'>four</div>
<div class='flex-box'>five</div>
</div>
<div class='flex-box'>six</div>
</div>

我正在寻找一种方法来摄取这个"子容器"，并让孩子们像以前一样工作。

这可能吗？

Answer 1

使用display:contents(https://css-tricks.com/get-ready-for-display-contents/( 但要注意支持 (https://caniuse.com/#feat=css-display-contents(

.container {
display: flex;
flex-wrap: wrap;
}
.container div.flex-box {
width: 200px;
margin: 20px;
padding: 20px;
font-size: 40px;
border: 1px solid;
}
.subcontainer {
display: contents
}

<div class='container'>
<div class='flex-box'>one</div>
<div class='flex-box'>two</div>
<div class='flex-box'>three</div>
<div class='subcontainer'>
<div class='flex-box'>four</div>
<div class='flex-box'>five</div>
</div>
<div class='flex-box'>six</div>
</div>

Answer 2

如果元素是弹性容器的子元素，则它将成为弹性项。这是一般规则。

但是，当子浏览器处于绝对位置时，大多数浏览器会忽略该规则。

我不确定在这种情况下这是一个有用的解决方案，但这就是你必须做的：绝对定位.subcontainer并使其成为弹性容器，以便孩子们成为弹性物品。