/ / Flexbox reagiert auf Zeilenspaltenlayout - html, css, flexbox

Flexbox reactive Zeilenspaltenlayout - html, css, flexbox

Ich habe folgendes

HTML

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

Ich möchte folgende Layouts mit erreichen Flexbox.

Handy, Mobiltelefon

mobiles Layout

Tablette

Tablet-Layout

Desktop

Bildbeschreibung hier eingeben

Ich habe kein Problem mit mobilen und Desktop-Layouts, konnte es aber nicht für Tablets lösen.

Wie zu erzwingen .center div erscheint nach .letf und .right? Gibt es eine Möglichkeit, dies mit flexbox zu erreichen?

Antworten:

3 für die Antwort № 1

Dieser Code wird erreichen, was Sie in Tablet wollen, Sie können es in eine Medienabfrage für Tablet-Größe einbinden.

Der Schlüssel ist, die Breite von links und rechts auf 50% zu setzen, die Mitte auf 100% und dann "Flex-Flow: Zeilenumbruch" zu deklarieren. auf dem Behälter.

#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>

Hier ist ein Stift mit einer Demo https://codepen.io/Washable/pen/ZXxYPJ


3 für die Antwort № 2

Es gibt eine Flexbox-Eigenschaft namens order Das könnte hier nützlich sein, da Sie möchten, dass das Center-Div zuletzt ist: https://css-tricks.com/almanac/properties/o/order

Es gibt wahrscheinlich auch andere Lösungen, aber das sollten Sie wissen :) Hinweis: Sie können Medienabfragen verwenden, um die Reihenfolge wie gewünscht zu ändern.

Siehe auch flex-flow: row wrap;


2 für die Antwort № 3

Mit der Verwendung von order und

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

Insgesamt

.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>