Проблема при перестроении сетки для другого разрешения

105

17 сентября 2021, 11:20

Возникла проблема при перестроении сетки в зависимости от разрешения экрана.

<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; . Неужели такая типовая задача не может быть решена такими гибкими флексами?

Answer 1

Без дополнительной обертки для двух правых колонок вам не обойтись. Решение на codepen

* { 
  box-sizing: border-box; 
} 
 
.item { 
  padding: 1em; 
  min-height: 10px; 
  font-family: sans-serif; 
} 
 
.item-1 { 
  background-color: tomato; 
  min-height: 250px; 
} 
 
.item-2 { 
  background-color: YellowGreen; 
} 
 
.item-3 { 
  background-color: CornflowerBlue; 
} 
 
/***********************/ 
 
.wrapper { 
  display: flex; 
  flex-wrap: wrap; 
  overflow: hidden; 
} 
 
.right { 
  width: 100%; 
} 
 
.item { 
  width: 100%; 
} 
 
@media (min-width: 1000px) { 
  .item-1 { 
    width: 50%; 
  } 
   
  .right { 
    display: flex; 
    flex-direction: column; 
    width: 50% 
  } 
   
  .item-3 { 
    flex-grow: 1; 
  } 
}

<div class="wrapper"> 
  <div class="item item-1">1</div> 
  <div class="right"> 
    <div class="item item-2">2</div> 
    <div class="item item-3">3</div> 
  </div> 
</div>