Flexbox：将中间元素移至下一行 [英] Flexbox: move middle element to the next line

问题描述

我有一个 flex 物品，里面有三个 divs 。

I have a flex item that has three divs inside of it.

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

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

And I want to move the center column to the next line in small screens (less than 600px). It should occupy the 100% of the width of the screen.

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

The problem I have is that when the center column comes to the next line, the right column does not fit on the wrapper.

这是我的 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 ，您可以在其中查看其显示方式。

JSFiddle where you can see how it is displayed.

是否可以将中间列移至下一行使用 flexbox 占据屏幕宽度的100％？如果是，我想念什么？

Is it possible to move the middle column to the next line occupying 100% of the width of the screen using flexbox? If it is, what am I missing?

预先感谢！

推荐答案

像这样吗？

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;

  }
}

这篇关于Flexbox：将中间元素移至下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！