将子内容分别包装到主父宽度答案

【问题标题】：Wrap children content respectively to main parent width将子内容分别包装到主父宽度
【发布时间】：2018-11-11 23:41:59
【问题描述】：

我想知道是否有 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>

【问题讨论】：

flex 标签：Apache Flex [NOT CSS FLEXBOX] --> 使用前请阅读标签说明

标签： css flexbox

【解决方案1】：

您可以在.child 元素上使用display:contents (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>

【讨论】：