嵌套的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. 在wrapper2上使用flex: 1 0 auto;。就行中断而言，这是有效的，但是wrapper2不会缩小到其内容的宽度，因此框会失去中心并向左冲洗。
2. 在wrapper2上使用flex: 0 1 <2 * object-width>;。这使得wrapper2的行保持在一起太强烈，而是打破了wrapper1的行。 （针对第3种情况。）
3. 在wrapper2上使用flex: 0 1 auto或设置max-width: min-content;，但这绝不会让wrapper2的行水平伸展。 （针对1号方案。）

所以，如果有可能为我的设计实现解决方案的话，我会问你大师们。

这是我的JsFiddle。

Answer 1

在flex-direction: column的断点（最大宽度：600px）中使用.wrapper2。我也在你的CSS中做了一些改变。

Stack Snippet

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.wrapper1 {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  border: 2px solid blue;
}

.wrapper2 {
  display: flex;
  flex-flow: row wrap;
}

.object {
  width: 200px;
  height: 100px;
}

.obj1 {
  background-color: #aaccaa;
}

.obj2 {
  background-color: #ccaaaa;
}

.obj3 {
  background-color: #aaaacc;
}

@media (max-width:600px) {
  .wrapper2 {
    flex-direction: column;
  }
}

@media (max-width:400px) {}

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

<强> Updated Fiddle

Answer 2

你需要一个媒体查询（或脚本）来正确地完成它，原因是当孩子们不适合他们父母的宽度时，它是外部的兄弟姐妹，它会在内在的之前包裹，这是正常的包装顺序，无论是否使用Flexbox。

因为我们知道每个项目的宽度，所以加上它们加上边界，我们得到一个608px +体边距的断点，我在这里重置为0，因为它们可能在浏览器之间有所不同。

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

Updated fiddle

Stack snippet

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>

Answer 3

刚刚遇到同样的问题。我有3个内部div，我希望中间的第一个包裹。

使用float:right和float:left然后使用float:left或float:right作为中间div来解决此问题。

下行是你不能使用flex-grow等，但我的问题并不需要。