Flexbox：将中间元素移动到下一行

Question

我有一个 flex 项目，其中包含三个 divs。

┌────────────────────────────────────────┐
|                WRAPPER                 |
|   ┌─────────┬───────────┬──────────┐   |
|   |  LEFT   |   CENTER  |   RIGHT  |   |
|   |         |           |          |   |
|   └─────────┴───────────┴──────────┘   |
└────────────────────────────────────────┘

我想将center 列移动到小屏幕（小于 600 像素）中的下一行。它应该占据屏幕宽度的 100%。

我遇到的问题是当center 列进入下一行时，right 列不适合包装器。

这是我的HTML 代码：

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

这是我的CSS 代码：

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:column wrap; 
    height: 100px;
  }
  .center {
    width: 100%;
    order: 3;
  }

  .left{
    width: 50%;
  }
}

JSFiddle 在那里你可以看到它是如何显示的。

是否可以使用flexbox 将中间列移动到占据屏幕宽度 100% 的下一行？如果是，我错过了什么？

提前致谢！

Answer 1

这几乎是我需要的，但不完全是。我的问题是我有一组设置，所有这些设置都有一个标签、一个选定的选项和一个按钮。当他们三个都没有空间时，我需要选择换行到下一行。由于标签和选项可以是各种各样的值和组合，我需要解决方案来对文本的长度做出反应。我也真的希望它只在必要时包装。响应式的重点是让它更适合小屏幕，而不是让它们一直滚动！

我找到的解决方案是用flex-direction: row; 将前 2 个项目包装在一个内部包装器中，以便在包装时这些项目将垂直堆叠。然后内部包装器和按钮需要被flex-wrap: nowrap; 拒绝包装，因此它们将始终水平对齐。

结果是连续 3 个项目，中间的一个包裹。

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

JSFiddle Example

替代 2 如果您需要将中间项目包裹在.right 项目下方，在我的例子中是按钮，那么您需要将.center 和.right 项目放在inner-wrapper 中，并且以相反的顺序放置。为了克服顺序颠倒的问题，我们需要将order 添加到每个类中，并且您需要为.right 类赋予margin-left: auto; 以便它位于右侧。

Right-align JSFiddle example

Answer 2

当您想使用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>

Answer 3

这样的？

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;

  }
}