Сделать такое мешает wrapper первого и второго елементов, который нужен для декстопа. Единственное решение которое я смог придумать это js-ом делать unwraping на определенном расширении и тогда через flex свойство order ставить порядок блоков. Но есть ли css решение?
-
Вам обязательно нужен wrapper элементов 1-2 ? Без него делается с помощью flex: wrap– AleksandrCommented 11 авг. 2020 в 13:47
-
Добавил еще натуральную картинку на которой видно что блок 3 больше по высоте чем блок 1. Поэтому блок 2 не будет идти сразу под блоком 1 на десктопе, если использовать flex wrap и без wrapper– AlexandrCommented 11 авг. 2020 в 13:54
Добавить комментарий
|
3 ответа
Возможно так:
.items {
display: grid;
grid-template-areas: "block1 block3"
"block2 block3";
}
.block {
width: 500px;
height: 200px;
border: 1px solid #000;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.block1{
grid-area: block1;
}
.block2{
grid-area: block2;
}
.block3 {
height: 400px;
grid-area: block3;
}
@media screen and (max-width: 600px) {
.items {
display: block;
}
}
<div class="items">
<div class="block block1">1</div>
<div class="block block3">3</div>
<div class="block block2">2</div>
</div>
-
Супер, спасибо! Пробовал через grid-area, но у меня не получилось)– AlexandrCommented 11 авг. 2020 в 14:20
-
1
Для решения данной задачи можно использовать множество подходов, я покажу как можно это сделать на примере CSS Grid Layout:
.wrapper {
display: grid;
grid-template-columns: min-content min-content;
}
.wrapper > div {
grid-column: 1 / 1;
display: grid;
align-items: center;
justify-content: center;
font-size: 20px;
width: 100px;
height: 100px;
color: white;
background-color: red;
margin: 10px;
}
.wrapper > div:last-of-type {
grid-column: 2 / 2;
grid-row: 1 / 1;
}
@media screen and (max-width: 500px) {
.wrapper {
grid-template-columns: min-content;
}
.wrapper > div:last-of-type {
grid-column: 1 / 1;
grid-row: 2 / 2;
}
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Измените размер, используя @media-правило, на тот который Вам нужен.
-
1у вас 3-й блок просто вниз уходит, а должен вклиниваться между 1-м и 2-м Commented 11 авг. 2020 в 14:09
-
-
Пример на всю страницу разверните, изменится положение.
.wrapper {
border: 1px solid black;
display: flex;
flex-direction: column;
}
.block {
margin: 5px;
height: 30vh;
border: 1px solid red;
}
.block:nth-child(2) {
order: 1;
}
@media screen and (min-width: 720px) {
.root {
display: inline-block;
}
.block:nth-child(3) {
position: absolute;
right: 0;
}
.block {
height: 40vh;
width: 45vw;
}
}
<div class="root">
<div class="wrapper">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
</div>
</div>