将孩子的内容分别包装到主要父母的宽度

Question

我想知道是否存在flex-way来创建fluid容器的行为parent：通过将红色框n1和n2移到蓝色框n3的左侧，并作为一个{结果将红色方框n3移动到容器的左侧

.parent {
  display: flex;
  width: 525px;
  flex-wrap: wrap;
  background-color: green;
}

.child {
  flex-wrap: wrap;
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  margin: 5px;
}

.blue .box {
  background-color: blue;
}

.red .box {
  background-color: red;
}

<div class='parent'>
  <div class='child blue'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
  <div class='child red'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
</div>

Answer 1

您可以在display:contents元素上使用.child（https://caniuse.com/#feat=css-display-contents），使框成为.parent元素的子元素。

.parent {
  display: flex;
  width: 555px;
  flex-wrap: wrap;
  background-color: green;
}

.child {
  flex-wrap: wrap;
  display: flex;
  display:contents
}

.box {
  width: 100px;
  height: 100px;
  margin: 5px;
}

.blue .box {
  background-color: blue;
}

.red .box {
  background-color: red;
}

<div class='parent'>
  <div class='child blue'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
  <div class='child red'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
</div>