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

Question

我有一个

flex

物品，里面有三个

divs

。

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

我想在小屏幕（小于 600 像素）中将

center

列移动到下一行。它应该占据屏幕宽度的 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

像这样吗？

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

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

我找到的解决方案是将前 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;
}

.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;
}

<label>
<input type="checkbox" id="embiggen" /> Check this box to make the Center part bigger
</label>

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

备选方案 2 如果您需要将中间项目包裹在

.right

项目下方，在我的例子中是按钮，那么您需要将

.center

和

.right

项目放在

inner-wrapper

中，并以相反的顺序。为了克服顺序颠倒的问题，我们需要为每个顺序添加

order

，并且您需要给

.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;
}

.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;
}

<label>
<input type="checkbox" id="embiggen" /> Check this box to make the Center part bigger
</label>

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

右对齐 JSFiddle 示例

Answer 3

当您想使用

flex-flow:column wrap;

时，您正在使用

flex-flow: row 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>