/ / Elastyczny układ kolumn wiersza Flexbox - html, css, flexbox

Elastyczny układ kolumn wiersza Flexbox - html, css, flexbox

Mam następujące

HTML

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

Chcę osiągnąć następujące układy za pomocą Flexbox.

mobilny

układ mobilny

Tablet

układ tabletu

Pulpit

wprowadź opis obrazu tutaj

Nie mam problemu z układami na komórki i komputery, ale nie mogłem go rozwiązać na tablety.

Jak zmusić .center div pojawiają się po .letf i .right? Czy istnieje sposób, aby to osiągnąć dzięki flexbox?

Odpowiedzi:

3 dla odpowiedzi № 1

Kod ten osiągnie to, co chcesz w tablecie, możesz zawrzeć w zapytaniu o media dotyczące rozmiaru tabletu.

Kluczem jest ustawienie szerokości lewej i prawej strony na 50%, centrum na 100%, a następnie zadeklarowanie "flex-flow: owijanie wiersza"; na pojemniku.

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

Oto długopis z prezentacją https://codepen.io/Washable/pen/ZXxYPJ


3 dla odpowiedzi № 2

Istnieje właściwość Flexbox o nazwie order to może być przydatne, ponieważ chcesz, aby centrum div było ostatnie: https://css-tricks.com/almanac/properties/o/order

Prawdopodobnie są też inne rozwiązania, ale to jest coś, o czym powinieneś wiedzieć :) Wskazówka: możesz użyć zapytań o media, aby zmienić kolejność według potrzeb.

Zobacz też flex-flow: row wrap;


2 dla odpowiedzi nr 3

Z wykorzystaniem order i

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

Razem

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