Flexbox: sposta l'elemento intermedio sulla riga successiva - css, css3, flexbox

Ho un flex oggetto che ha tre divs dentro di esso.

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

E voglio spostare il center colonna alla riga successiva in piccoli schermi (meno di 600px). Dovrebbe occupare il 100% della larghezza dello schermo.

Il problema che ho è che quando il center la colonna arriva alla riga successiva, la right la colonna non si adatta al wrapper.

Ecco il mio HTML codice:

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

Ecco il mio CSS codice:

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 dove puoi vedere come viene visualizzato.

È possibile spostare la colonna centrale sulla riga successiva occupando il 100% della larghezza dello schermo flexbox? Se lo è, cosa mi manca?

Grazie in anticipo!

risposte:

Qualcosa come questo?

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;

}
}

Stai usando flex-flow:column wrap; quando vuoi usare flex-flow: row wrap. E i tuoi div sono fuori uso, tu vuoi il .center div per essere ultimo. Flexbox ordina i div in base ai valori ascendenti.

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>

Questo era quasi ciò di cui avevo bisogno, ma non del tutto. Il mio problema era che ho una collezione di impostazioni, ognuna delle quali ha un'etichetta, un'opzione selezionata e un pulsante. Quando non c'è spazio per tutti e 3 ho bisogno dell'opzione per passare alla riga successiva, poiché le etichette e le opzioni possono essere un'enorme varietà di valori e combinazioni, ho bisogno che la soluzione reagisca alla lunghezza del testo. lo voglio anche solo avvolgere quando è necessario. Il punto di risposta è quello di renderlo migliore per gli schermi più piccoli, senza farli scorrere continuamente!

La soluzione che ho trovato era di avvolgere i primi 2 oggetti in un involucro interno con flex-direction: row; in modo che quando avvolge gli oggetti si impilano verticalmente. Quindi l'involucro interno e i pulsanti devono essere negati con l'involucro flex-wrap: nowrap; quindi si allineeranno sempre orizzontalmente.

Il risultato è 3 elementi su una riga, e quello centrale avvolge.

Alt 1 Se hai bisogno che il primo oggetto sia quello che occupa tutto lo spazio rimanente, spostati flex-grow: 1; al .left

Esempio JSFiddle

Alt 2 Se hai bisogno dell'elemento centrale per avvolgere sotto il .right elemento, che è il pulsante nel mio caso, quindi è necessario inserire il .center e .right articoli in inner-wrapper invece e in ordine inverso. Per superare l'inversione dell'ordine, dobbiamo aggiungere order a ciascuno, e devi dare il .right classe A margin-left: auto; in modo che si sieda a destra.

Esempio JSFiddle allineato a destra