Question

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

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

这可能吗？

Answer 1

如果元素是flex容器的子元素，则它将成为flex项。这是一般规则。

但是，most browsers将在绝对定位孩子时忽略该规则。

在这种情况下，我不确定这是否是一个有用的解决方案，但这就是您必须要做的：绝对定位.subcontainer并将其设置为flex容器，以便子级变为flex项。

Answer 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>

忽略flex容器的子级，而不是孙子级

2 个答案: