html - 嵌套的 flexbox 行换行顺序？

Question

我正在为可变屏幕宽度设计一个嵌套的 flexbox。应该有三个框，按以下方式排列:

<div class="wrapper1">
  <div class="object obj1"></div>
  <div class="wrapper2">
    <div class="object obj2"></div>
    <div class="object obj3"></div>
  </div>
</div>

Wrapper1 100% 宽，内容居中。

现在我想要以下场景。

1. 当屏幕足够宽时，三个框必须水平排列。
2. 当屏幕足够窄时，三个框必须垂直排列。
3. 当屏幕宽度只能水平放置 2 个框时，wrapper1 的行不应中断，而 wrapper2 的行应中断，从而形成以下配置:

我的问题是我找不到执行此操作的 flex 配置。到目前为止我尝试了什么:

1. 使用 flex: 1 0 auto;在包装器 2 上。就换行而言，这是有效的，但 wrapper2 不会缩小到其内容的宽度，因此框会失去中心并向左齐平。
2. 使用 flex: 0 1 <2 * object-width>;在包装器 2 上。这使 wrapper2 的行过于紧密地保持在一起，反而打断了 wrapper1 的行。 (针对场景 3。)
3. 使用 flex: 0 1 auto或设置 max-width: min-content;在 wrapper2 上，但这永远不会让 wrapper2 的行水平拉伸(stretch)。 (针对场景 1。)

所以我想问问你们这些专家是否有可能为我的设计实现一个解决方案。

这是我的 JsFiddle .

Answer 1

您将需要一个媒体查询(或脚本)来正确完成此操作，原因是当子级不适合其父级的宽度时，外部 sibling 将先换行，然后内部 sibling 才换行，这是正常的包装顺序，无论是否使用 Flexbox。

因为我们知道每个元素的宽度，将它们加上边框相加，我们在 608px + 主体边距处得到一个断点，我在这里将其重置为 0，因为它可能因浏览器而异。

然后，在断点处，您只需执行例如将 flex: 1 0 auto 更改为 flex: 0 0 auto，它将正确地换行和居中。

Updated fiddle

堆栈片段

body {
  margin: 0;
}
.wrapper1 {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  border: 2px solid blue;
}
.wrapper2 {
  display: flex;
  flex-flow: row wrap;
  flex: 1 0 auto;
  min-width: 200px;
  max-width: 400px;
  border: 2px solid red;
}
.object {
  flex: 0 0 200px;
  height: 100px;
}
.obj1 {
  background-color: #aaccaa;
}
.obj2 {
  background-color: #ccaaaa;
}
.obj3 {
  background-color: #aaaacc;
}

@media (max-width: 608px) {
  .wrapper2 {
    flex: 0 0 auto;
  }  
}

<div class="wrapper1">
  <div class="object obj1"></div>
  <div class="wrapper2">
    <div class="object obj2"></div>
    <div class="object obj3"></div>
  </div>
</div>