Возникла проблема при перестроении сетки в зависимости от разрешения экрана.
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
}
.item {
width: 100%;
}
</style>
Таким образом три блока встают друг под другом, растягиваясь на всю ширину и центрируясь. При разрешениях выше определенного значения, сетка выглядит по другому: блок 2 занимает левую половину контейнера, а блоки 1 и 3 находятся друг под другом по правую сторону от блока 1.
.item {
width: 50%;
}
.item:first-of-type {
order: 2;
{
.item:nth-of-type(2) {
order: 1;
}
.item-last-of-type {
order: 3;
margin-left: auto;
}
При таком коде всё практически становится на свои места кроме одного: если блок 2 (который слева) выше блока 1 (который сверху справа), то блок 3 (который снизу справа) не становится сразу под блок 1.
Как заставить блок 3 не учитывать высоту блока 1 ? Отрицательный margin-top не подойдет, так как блоки заполняются контентом. Фиксированная высота + overflow: visible/scroll не подходит, так как контент может быть также разной высоты. Сломал голову, пока остановился на варианте с двумя блоками в разметке (во втором блоке разметки объединяю блок 1 и 3 в контйнер), которые переключаются свойством display: none; . Неужели такая типовая задача не может быть решена такими гибкими флексами?