/ Rozloženie stĺpcov riadiacej skupiny s odpoveďou na Flexbox - html, css, flexbox

Riadiace usporiadanie stĺpcov riadiacej jednotky Flexbox - html, css, flexbox

Mám nasledujúce

HTML

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

Chcem dosiahnuť nasledujúce rozloženia pomocou flexboxu.

Mobilné

mobilné rozloženie

tableta

rozloženie tabletu

Desktop

tu zadajte popis obrázku

Nemám problém s rozložením mobilných a pracovných plôch, ale nedokázal ich vyriešiť pre tablety.

Ako vynútiť .center div sa objaví po .letf a .right? Existuje spôsob, ako to dosiahnuť pomocou flexboxu?

odpovede:

3 pre odpoveď č. 1

Tento kód dosiahne to, čo chcete v tablete, môžete ho zabaliť do mediálneho dopytu pre veľkosť tabletu.

Kľúčom je nastaviť šírku ľavého a pravého na 50%, striedavo na 100% a potom deklarovať "flex-flow: wrap wrap;" na kontajneri.

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

Tu je pero s demo https://codepen.io/Washable/pen/ZXxYPJ


3 pre odpoveď č. 2

K dispozícii je vlastnosť flexbox order ktoré by mohli byť užitočné, pretože chcete, aby stredisko div prišlo naposledy: https://css-tricks.com/almanac/properties/o/order

Existuje pravdepodobne aj iné riešenia, ale je to niečo, o čom by ste mali vedieť :) Tip: môžete použiť mediálne dopyty na zmenu poradia podľa želania.

Pozri tiež flex-flow: row wrap;


2 pre odpoveď č. 3

S použitím order a

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

Spolu

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