Flexbox: przenieś środkowy element do następnej linii - css, css3, flexbox

mam flex przedmiot, który ma trzy divs w środku.

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

I chcę przenieść center od kolumny do następnej linii na małych ekranach (mniej niż 600 pikseli). Powinien zajmować 100% szerokości ekranu.

Problemem, który mam, jest to, że kiedy center kolumna przechodzi do następnej linii, right kolumna nie mieści się na opakowaniu.

Tutaj jest mój HTML kod:

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

Tutaj jest mój CSS kod:

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 gdzie możesz zobaczyć, jak jest wyświetlany.

Czy możliwe jest przesunięcie środkowej kolumny do następnej linii zajmującej 100% szerokości ekranu za pomocą flexbox? Jeśli tak, to czego mi brakuje?

Z góry dziękuję!

Odpowiedzi:

Coś takiego?

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;

}
}

Używasz flex-flow:column wrap; kiedy chcesz użyć flex-flow: row wrap. A twoi div są nieczynni - chcesz .center div jest ostatni. Flexbox zamawia elementy div na podstawie rosnących wartości.

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>

To było prawie to, czego potrzebowałem, ale nie całkiem. Mój problem polegał na tym, że mam kolekcję ustawień, z których wszystkie mają etykietę, wybraną opcję i przycisk. Kiedy nie ma miejsca na wszystkie trzy z nich, potrzebuję opcji zawijania do następnej linii, ponieważ etykiety i opcje mogą być ogromną różnorodnością wartości i kombinacji, potrzebuję rozwiązania, aby zareagować na długość tekstu. również naprawdę chcesz, aby tylko zawinąć, gdy jest to konieczne. Chodzi o to, aby lepiej na mniejszych ekranach, nie przewijać ich przez cały czas!

Rozwiązaniem, które znalazłem, było owinięcie pierwszych 2 elementów w wewnętrzne opakowanie flex-direction: row; aby po zawinięciu przedmioty układały się pionowo. Wtedy wewnętrzne opakowanie i przyciski muszą zostać zaprzeczone owinięciu flex-wrap: nowrap; więc zawsze będą wyrównane poziomo.

Rezultatem są 3 przedmioty z rzędu, a środkowy opak.

Alt 1 Jeśli potrzebujesz, aby pierwszy przedmiot był tym, który zajmuje całą pozostałą przestrzeń, po prostu przenieś flex-grow: 1; do .left

JSFiddle Przykład

Alt 2 Jeśli potrzebujesz środkowego elementu do zawijania pod .right pozycja, która jest przyciskiem w moim przypadku, musisz umieścić .center i .right elementy w inner-wrapper zamiast tego iw odwrotnej kolejności. Aby przezwyciężyć odwrócenie porządku, musimy dodać order do każdego, i musisz dać .right klasa A margin-left: auto; tak, że przesuwa się w prawo.

Wyrównanie w prawo przykład JSFiddle