Flexbox - 将中间元素移动到下一行（没有媒体查询）答案

【问题标题】：Flexbox - move middle element to the next line (without media query)Flexbox - 将中间元素移动到下一行（没有媒体查询）
【发布时间】：2018-06-14 16:24:57
【问题描述】：

我想要实现的目标（但没有媒体查询）：

JsFiddle

@media all and (max-width: 600px) {
  #wrapper {
    flex-wrap:wrap;
    height: 100px;
  }

  .center {
    width: 100%;
    order: 3;
  }

  .left{
    width: 50%;
  }

  .right {
    width:50%;
    order:2;
  }
}

我在一个包装器中有 3 个元素，全部都缩小了。在桌面尺寸下，还有一些空间剩余，但是当我将窗口调整为更小的尺寸时，在某些时候，元素会用完空间。发生这种情况时，我想将中间元素放在下一行。我有一个解决方案，第三个元素进入下一行，JSFiddle 解决方案，第二个元素进入下一行，但始终保持相同的静态宽度。

那么当所有三个缩小的元素都用完空间时，是否可以将中间元素放到下一行？

【问题讨论】：

空间太小，物品会被包裹起来。这可以自然发生。但是为什么第二个和第三个元素会在那个时候切换呢？如果没有媒体查询，就没有什么可以告诉他们切换。
您能解释一下为什么要避免媒体查询吗？因为您的解决方案看起来像是媒体查询的完美用例——在给定断点处更改 flex 子项的顺序和大小。
我希望他们切换，因为第三个元素在右上角更自然。至于为什么我想避免媒体查询。中间元素的宽度变化。有多种情况下，此包装器会显示在网站上，并且每次都具有不同的内容。因此，如果我将媒体查询设置为应该转到下一行的最大长度，则当中间元素较窄时，可能会有很多不必要的空间。媒体查询的优点是在特定屏幕尺寸下所有元素的布局相同。我的用户体验很差。
您可以添加一个脚本来检查最后一个元素的宽度，如果最后一个元素是全屏宽度，您可以在中间元素上添加order 和width: 100%; 将其放置在底部。

标签： css flexbox

【解决方案1】：

您绝对可以使用flex-wrap、flex-grow、flex-shrink 和flex-basis 来指定任何给定项目应具有的最小宽度，从而在没有媒体查询的情况下换行：

#wrapper{
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
}

.right{
  width: 20%;
  background-color: blue;
  order: 3;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 200px;
}

但不可能仅根据元素是否“适合”来更改flex-order。为此，您肯定需要媒体查询。

【讨论】：