像这样的吗
https://jsfiddle.net/wqLezyfe/2/

@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个我需要的选项，以 Package 到下一行。由于标签和选项可以是各种各样的值和组合，我需要解决方案来对文本的长度做出React。我也真的希望它只在必要的时候 Package 。响应式的重点是让它更适合小屏幕，而不是让它们一直滚动！
我发现的解决方案是将前2个项目 Package 在一个内部 Package 器中，使用flex-direction: row;，以便在 Package 时，项目将垂直堆叠。然后，内部 Package 和按钮需要拒绝使用flex-wrap: nowrap; Package ，以便它们始终水平对齐。
结果是一行中有3个项目，中间的项目换行。

Alt 1如果您需要第1项占据所有剩余空间，只需将flex-grow: 1;移动到.left

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

#wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: top;
  text-align: center;
  
  outline: 1px solid rebeccapurple;
}

.inner-wrapper {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.block {
  height: 50px;
}

.left {
  background-color: red;
}

.center {
  background-color: green;
  flex-grow: 1;
}

.right {
  background-color: blue;
}

label {
    display: block;
    margin: 1em;
}
label:has( #embiggen:checked ) ~ div#wrapper #centerDiv {
    min-width: 800px;
}

<div id="wrapper">
  <div class="inner-wrapper">
    <div class="block left">LeftLeftLeft</div>
    <div class="block center" id="centerDiv">CenterCenterCenter</div>
  </div>
  <div class="block right">RightRightRight</div>
</div>

JSFiddle Example

Alt 2如果您需要将中间项包在.right项下面，在我的例子中是按钮，那么您需要将.center和.right项放在inner-wrapper中，并以相反的顺序。为了克服顺序颠倒的问题，我们需要将flex-direction: row-reverse添加到inner-wrapper中，并且需要为.right类给予一个margin-left: auto;，以便它位于右侧。

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

#wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: top;
  text-align: center;

  outline: 1px solid rebeccapurple;
}

.inner-wrapper {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.block {
  height: 50px;
}

.left {
  background-color: red;
}

.center {
  background-color: green;
  flex-grow: 1;
}

.right {
  background-color: blue;
  margin-left: auto;
}

label {
    display: block;
    margin: 1em;
}
label:has( #embiggen:checked ) ~ div#wrapper #centerDiv {
    min-width: 800px;
}

<div id="wrapper">
  <div class="block left">LeftLeftLeft</div>
  <div class="inner-wrapper">
    <div class="block right">RightRightRight</div>
    <div class="block center" id="centerDiv">CenterCenterCenter</div>
  </div>
</div>

Right-align JSFiddle example

当您想使用flex-flow: row wrap时，您正在使用flex-flow:column wrap;。而且div的顺序也乱了--您希望.center div排在最后。Flexbox根据升序值对div进行排序。

html, body{
  height: 100%;
}

body{
  margin: 0;
}

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

.block{
  height: 50px;
}

.left{
  width: 20%;
  background-color: red;
  order: 1;
}

.center{
  width: 60%;
  background-color: green;
  order: 2;
}

.right{
  width: 20%;
  background-color: blue;
  order: 3;
}

@media all and (max-width: 600px) {
  #wrapper{
    flex-flow: row wrap; 
    height: 100px;
  }
  .center {
    width: 100%;
    order: 3;
  }
  .right {
    order: 2;
  }
  
  .left{
    width: 50%;
    order: 1;
   
  }
}

<div id="wrapper">
    <div class="block left">Left</div>
    <div class="block center">Center</div>
    <div class="block right">Right</div>
</div>