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

Question

我有一个flex项目divs里面有三个.

??????????????????????????????????????????
|                WRAPPER                 |
|   ??????????????????????????????????   |
|   |  LEFT   |   CENTER  |   RIGHT  |   |
|   |         |           |          |   |
|   ??????????????????????????????????   |
??????????????????????????????????????????

我想center在小屏幕(小于600px)中将列移动到下一行.它应该占据屏幕宽度的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,您可以在其中查看它的显示方式.

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

提前致谢!

Answer 1

像这样的东西？

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;

  }
}

Answer 2

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

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

结果是 3 个项目排成一行，中间一个换行。

Alt 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 示例

Alt 2 如果您需要将中间项目包裹在该.right项目下方（在我的例子中是按钮），那么您需要将.center和.right项目按inner-wrapper相反的顺序放置。为了克服顺序颠倒的问题，我们需要添加flex-direction: row-reverse到inner-wrapper，并且您需要给该类.righta 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>

右对齐 JSFiddle 示例