Flexbox: move middle item to next line

Question

I have a flex element that has three divs .

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

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

The problem is that when the center column moves to the next row, the right column does not fit into 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 row, occupying 100% of the screen width, using flexbox ? If so, what am I missing?

Thanks in advance!

Answer 1

Something like that?

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

You are 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 .center be the last. Flexbox arranges divs based on upstream 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> 

Answer 3

It was almost what I needed, but not quite. My problem was that I have a set of settings, each of which has a label, a selected option and a button. When there is no room for all 3 of them, I need an option to wrap to the next line. Since labels and parameters can be a huge array of values ​​and combinations, I need a solution that responds to the length of the text. I also really want him to only turn around when necessary. The reaction point is to make it better for smaller screens, rather than scrolling them all the time!

The solution I found was to wrap the first 2 elements in an inner wrapper using flex-direction: row; so that when flowing around the elements will fold vertically. Then the inner shell and buttons need to refuse packaging using flex-wrap: nowrap; so that they are always aligned horizontally.

The result is 3 elements per row, and the middle one is wrapped.

Alt 1 If you need the 1st element that will occupy all the remaining space, just move flex-grow: 1; in .left

JSFiddle example

Alt 2 If you need the middle element to wrap under the .right element, which is a button in my case, then you need to place the .center and .right in the inner-wrapper instead and in reverse order. To overcome the reversal of order, we need to add order to each of them, and you need to provide a class .right a margin-left: auto; so that it is on the right.

Right-aligned JSFiddle example