忽略 flex 容器子项，但不考虑孙子项答案

【问题标题】：Ignore flex container children but not grandchildren忽略 flex 容器子项，但不考虑孙子项
【发布时间】：2020-12-11 12:03:00
【问题描述】：

我有一个带有一些子元素的简单 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>

我正在寻找一种方法来引入这个“子容器”，并让孩子们像以前一样工作。

这可能吗？

【问题讨论】：

你在css中的选择器，只选择容器中的第一层子div，为了做你需要的，你必须用一些类名指定你的flex div，例如.flex-box whitout大于签名'>'，这样你就可以做你需要的事情
你说得对，让我删除那个'>'，我尝试使用你所说的类：jsfiddle.net/bc3o4j75/1 但不起作用:(

标签： html css flexbox

【解决方案1】：

如果元素是弹性容器的子元素，那么它就成为弹性项目。这是一般规则。

但是，当孩子处于绝对位置时，most browsers 将忽略该规则。

我不确定在这种情况下这是一个有用的解决方案，但这就是您必须做的：绝对定位 .subcontainer 并使其成为弹性容器，以便子项成为弹性项目。

【讨论】：

或者我们开始考虑 display:contents，即使它还没有得到很好的支持
是的，我考虑过。但由于支持较弱，我懒得提了。这是一篇深入的评论：stackoverflow.com/q/47929369/3597276@TemaniAfif

【解决方案2】：

使用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>

【讨论】：