忽略 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屋！