Flexbox: mueve el elemento medio a la siguiente línea - css, css3, flexbox

tengo un flex elemento que tiene tres divs dentro de ella

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

Y quiero mover el center Columna a la línea siguiente en pantallas pequeñas (menos de 600 px). Debería ocupar el 100% del ancho de la pantalla.

El problema que tengo es que cuando el center columna viene a la siguiente línea, la right La columna no cabe en la envoltura.

Aquí está mi HTML código:

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

Aquí está mi CSS código:

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 Donde se puede ver como se muestra.

¿Es posible mover la columna central a la siguiente línea que ocupa el 100% del ancho de la pantalla usando flexbox? Si es así, ¿qué me falta?

¡Gracias por adelantado!

Respuestas

¿Algo como esto?

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;

}
}

Usted está usando flex-flow:column wrap; cuando quieras usar flex-flow: row wrap. Y tus divs están fuera de orden, quieres el .center div ser el ultimo Flexbox ordena divs basados ​​en valores ascendentes.

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>

Esto era casi lo que necesitaba, pero no del todo. Mi problema fue que tengo una colección de configuraciones, todas con una etiqueta, una opción seleccionada y un botón. Cuando no hay espacio para los 3, necesito la opción de pasar a la siguiente línea. Como las etiquetas y las opciones pueden ser una gran variedad de valores y combinaciones, necesito la solución para reaccionar a la longitud del texto. También realmente quiero envolver solo cuando sea necesario. El objetivo de responsive es hacerlo mejor para pantallas más pequeñas, ¡no hacer que se desplacen todo el tiempo!

La solución que encontré fue envolver los primeros 2 artículos en un envoltorio interno con flex-direction: row; de modo que cuando se envuelve los elementos se apilarán verticalmente. Luego se debe negar el envoltorio interno y los botones con flex-wrap: nowrap; por lo que siempre se alinearán horizontalmente.

El resultado es 3 elementos en una fila, y el medio se ajusta.

Alt 1 Si necesita que el primer elemento sea el que ocupa todo el espacio restante, simplemente mueva flex-grow: 1; al .left

Ejemplo de JSFiddle

Alt 2 Si necesita el elemento intermedio para envolver debajo de la .right Elemento, que es el botón en mi caso, entonces necesita poner el .center y .right artículos en el inner-wrapper En cambio y en orden inverso. Para superar la reversión del pedido necesitamos agregar. order a cada uno, y hay que dar el .right clase A margin-left: auto; para que se asiente a la derecha.

Ejemplo de alineación a la derecha de JSFiddle