忽略 flex 容器子项,但不忽略孙子项 [英] Ignore flex container children but not grandchildren
问题描述
我有一个简单的 flex 元素和一些子元素,如下所示:
.container{显示:弹性;flex-wrap: 包裹;}.container div.flex-box{宽度:200px;边距:20px;填充:20px;字体大小:40px;边框:1px 实心;}
<div class='flex-box'>one</div><div class='flex-box'>二</div><div class='flex-box'>三</div><div class='flex-box'>四</div><div class='flex-box'>五</div><div class='flex-box'>六</div>
我正在使用 flex wrap,所以当屏幕变小时,它们会堆叠起来.
现在,我想使用 ajax 调用重新加载第四个和第五个元素来重新加载两个元素,为此我需要将两个子元素都放在一个容器中,但是当我这样做时,它变成了一个新的 flex 子元素
.container{显示:弹性;flex-wrap: 包裹;}.container div.flex-box{宽度:200px;边距:20px;填充:20px;字体大小:40px;边框:1px 实心;}
<div class='flex-box'>one</div><div class='flex-box'>二</div><div class='flex-box'>三</div><div class='flex-box'>四</div><div class='flex-box'>五</div><div class='flex-box'>六</div>
我正在寻找一种方法来进入这个子容器",并让孩子们像以前一样工作.
这可能吗?
Use display:contents
(https://css-tricks.com/get-ready-for-display-contents/) 但要注意支持 (https://caniuse.com/#feat=css-display-contents)
.container {显示:弹性;flex-wrap: 包裹;}.container div.flex-box {宽度:200px;边距:20px;填充:20px;字体大小:40px;边框:1px 实心;}.子容器{显示:内容}
<div class='flex-box'>one</div><div class='flex-box'>二</div><div class='flex-box'>三</div><div class='flex-box'>四</div><div class='flex-box'>五</div><div class='flex-box'>六</div>
I have a simple flex element with some children, something like this:
.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>
I am using flex wrap so, when screen goes smaller they stack.
Now, I want to reload fourth and fifth element using an ajax call to reload both elements, for this I need to put both children inside a container, but when I do, it becomes a new 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='subcontainer'>
<div class='flex-box'>four</div>
<div class='flex-box'>five</div>
</div>
<div class='flex-box'>six</div>
</div>
I am looking for a way to ingore this "subcontainer", and keep the children working as before.
Is this possible?
Use display:contents
(https://css-tricks.com/get-ready-for-display-contents/) but pay attention to the support (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>
这篇关于忽略 flex 容器子项,但不忽略孙子项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!