我有一个带有一些孩子的简单flex元素,像这样:
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>
我使用的是flex wrap,因此,当屏幕变小时,它们会堆叠在一起。
I am using flex wrap so, when screen goes smaller they stack.
现在,我想使用重新加载两个元素的ajax调用,为此,我需要将两个孩子都放入一个容器中,但是当我这样做时,它将成为一个新的flex孩子
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.
这可能吗?
推荐答案使用 display:contents ( css-tricks/get-ready-for-display-contents/ )但请注意支持( caniuse/#feat=css-display -contents )
Use display:contents (css-tricks/get-ready-for-display-contents/) but pay attention to the support (caniuse/#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容器的子级,而不是孙子级
发布评论