Ignore flex container children but not grandchildren

问题

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?

回答1:

Use display:contents (https://css-tricks.com/get-ready-for-display-contents/) but it still lack support unfortunately (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>

回答2:

If the element is a child of a flex container, then it becomes a flex item. That's the general rule.

However, most browsers will ignore that rule when the child is absolutely positioned.

I'm not sure that's a useful solution in this case, but that's what you would have to do: absolutely position .subcontainer and make it flex container, so that the children become flex items.

来源：https://stackoverflow.com/questions/52191000/ignore-flex-container-children-but-not-grandchildren

标签

html

css

css3

flexbox