html - 忽略 flex 容器子项,但不考虑孙子项
问题描述
我有一个带有一些子元素的简单 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 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>
我正在寻找一种方法来引入这个“子容器”,并让孩子们像以前一样工作。
这可能吗?
解决方案
使用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>
推荐阅读
- javascript - (Javascript 问题)getElementById 无法获取元素,即使我可以在 Chrome 检查器中看到它
- mysql - 需要查询这个逻辑
- php - 在 php 中连接 mysql db 时出错
- python - 我正在尝试使用 python ctypes 打开一个用 c 编写的 dll 并在其中运行该函数,但它以字符的形式出现,而不是字符串
- python - 热图像处理
- blazor - 禁用在服务器端 Blazor 组件中获取数据时单击的元素
- rotational-matrices - 如何使用张量旋转规则旋转弹性刚度矩阵?
- scikit-learn - 创建生成器后从多标签二值化器获取标签
- python - 将 C++ OpenGL 移植到 PyOpenGL 无法正确渲染
- debugging - 环境变量未传递给 Visual Studio Code 中的调试器