Layout della colonna di righe reattive Flexbox: html, css, flexbox

Ho il seguente

HTML

<div>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>

Voglio ottenere i seguenti layout usando FlexBox.

Mobile

Tavoletta

Desktop

Non ho alcun problema con i layout mobili e desktop, ma non posso risolverlo per i tablet.

Come forzare .center div appaiono dopo .letf e .right? C'è un modo per ottenerlo con la flexbox?

risposte:

Questo codice raggiungerà ciò che desideri nel tablet, puoi avvolgerlo in una query multimediale per le dimensioni del tablet.

La chiave è di impostare la larghezza di sinistra e destra al 50%, al centro al 100% e quindi dichiarare "Flusso flessibile: fila a capo"; sul contenitore.

#container{
display:flex;
flex-flow: row wrap;
}
.left{
order: 1;
width:50%;
background-color: red;
}
.right{
order: 2;
width:50%;
background-color: green;
}
.center{
order: 3;
width:100%;
background-color: blue;
}

<div id="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>

Ecco una penna con una demo https://codepen.io/Washable/pen/ZXxYPJ

C'è una proprietà flexbox chiamata order potrebbe essere utile qui visto che vuoi che il div centrale arrivi per ultimo: https://css-tricks.com/almanac/properties/o/order

Probabilmente ci sono anche altre soluzioni, ma questo è qualcosa che dovresti sapere :) Suggerimento: puoi usare le media query per modificare l'ordine come desiderato.

Guarda anche flex-flow: row wrap;

Con l'uso di order e

@media(min-width:768px) {
.flexbox {
flex-flow: row nowrap;
}
...
}

In totale

.flexbox {
display: flex;
flex-direction: column;
background: #565656;
padding: 5px;
align-content: space-between;
justify-content: space-between;
}

.flexbox>div {
text-align: center;
padding: 20px 0;
margin: 5px;
}

.flexbox>.left {
background-color: #D30058;
}

.flexbox>.center {
background-color: #36ABE1;
}

.flexbox>.right {
background-color: #23B776;
}

@media(min-width:576px) {
.flexbox {
flex-flow: row wrap;
}
.flexbox>.left {
order: 1;
flex: 0.5;
}
.flexbox>.right {
order: 2;
flex: 0.5;
}
.flexbox>.center {
order: 3;
width: 100%;
}
}

@media(min-width:768px) {
.flexbox {
flex-flow: row nowrap;
}
.flexbox>div {
width: 33.33% !important;
}
.flexbox>.left {
order: 1;
}
.flexbox>.center {
order: 2;
}
.flexbox>.right {
order: 3;
}
}

<div class="flexbox">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>