Flexbox: move middle element to the next line

问题

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

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

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.

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

Here is my HTML code:

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

Here is my CSS code:

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 where you can see how it is displayed.

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?

Thanks in advance!

回答1:

Something like this?

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;

  }
}

回答2:

You're using flex-flow:column wrap; when you want to use flex-flow: row wrap. And your divs are out of order—you want the .center div to be last. Flexbox orders divs based on ascending values.

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>

回答3:

This was nearly what I needed, but not quite. My issue was that I have a collection of settings, all of which have a label, a selected option and a button. When there's not space for all 3 of them I need the option to wrap to the next line. As the labels and options can be a huge variety of values and combinations I need the solution to react to the length of the text. I also really want it to only wrap when it's necessary. The point of responsive is to make it better for smaller screens, not have them scrolling all the time!

The solution I found was to wrap the first 2 items in an inner wrapper with flex-direction: row; so that when it wraps the items will stack vertically. Then the inner wrapper and the buttons need to be denied wrapping with flex-wrap: nowrap; so they will always align horizontally.

The result is 3 items on a row, and the middle one wraps.

Alt 1 If you need the 1st item to be the one that takes up all the remaining space, just move flex-grow: 1; to the .left

JSFiddle Example

Alt 2 If you need the middle item to wrap beneath the .right item, which is the button in my case, then you need to put the .center and .right items in the inner-wrapper instead and in reverse order. To overcome the reversing of the order we need to add order to each one, and you need to give the .right class a margin-left: auto; so that it sits over to the right.

Right-align JSFiddle example

来源：https://stackoverflow.com/questions/36927483/flexbox-move-middle-element-to-the-next-line