忽略flex容器的子项，但不要忽略孙项
忽略flex容器的子项，但不要忽略孙项
提问于 2018-09-06 02:00:27
我有一个包含一些子元素的简单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>
我使用了flex包装，所以当屏幕变小时，它们会堆叠在一起。
现在，我希望使用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>
我正在寻找一种方法来压缩这个“子容器”，并让孩子们像以前一样工作。
这个是可能的吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-06 03:15:51
使用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>
Stack Overflow用户
发布于 2018-09-06 02:37:33
如果元素是flex容器的子项，那么它将成为flex项。这是一般规则。
但是，当子对象处于绝对位置时，most browsers将忽略该规则。
我不确定在这种情况下这是一个有用的解决方案，但这是你必须做的:绝对定位.subcontainer并使其成为flex容器，这样孩子就会成为flex项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52191000
复制相关文章
相似问题