flexbox 可以检测到 flex 项目何时换行吗？

Question

我希望摆脱媒体查询，只使用 flexbox 来解决我的问题，但我不确定这是否可能。随着窗口变小，我希望列缩小直到达到最小宽度。一旦他们击中那个，中间的列就会跳下来进行包装。

我想我的问题归结为这个——flexbox 可以检测到它何时换行吗？如果是这样，我可以提示它严格使用 CSS 更改包装项目的顺序吗？

这是我试图使用媒体查询完成的 代码笔。

 .wrapper {
  display: flex;
  justify-content: center;
  margin: 5px;
  flex-wrap: wrap;
}

.red {
  background-color: red;
  height: 240px;
  margin: 5px;
  width: 500px;
  order: 0;
}

.yellow {
  background-color: yellow;
  margin: 5px;
  height: 240px;
  min-width: 240px;
  max-width: 400px;
  flex: 1;
  order: 1;
}

.blue {
  background-color: blue;
  height: 240px;
  margin: 5px;
  min-width: 350px;
  max-width: 400px;
  flex: 1;
  order: 2;
}

@media (max-width:1130px) {
  .yellow {
    order: 4;
  }
}

 <div class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="blue"></div>
</div>

原文由 Lexie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

flexbox 可以检测到 flex 项目何时换行吗？

不。

在 CSS 中，一旦浏览器在初始级联上呈现页面，它就不会在元素换行时重排文档。结果，父元素不知道它们的子元素何时换行。

这就是容器在包装后不会收缩以适合其内容的原因。

这就是您需要媒体查询或 JavaScript 的原因。

以下是更多详细信息：

• 使容器在包裹时收缩以适合子元素
• 如何将弹性容器居中但左对齐弹性项目

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议