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

这样的东西？

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

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

Answer 3

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

我找到的解决方案是将前两个项目包装在一个带有flex-direction: row;的内包装中，这样当它包装时，项目将垂直堆叠。然后内包装和按钮需要被拒绝包裹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

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

3 个答案: