我有一个简单的 flex 元素和一些 child ,像这样:
.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 wrap,所以当屏幕变小时它们会堆叠。
现在,我想使用 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>
我正在寻找一种方法来忽略这个“子容器”,并让 children 像以前一样工作。
这可能吗?
最佳答案
使用 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>
关于html - 忽略 flex 容器的 child 而不是孙子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52191000/