0

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

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

1 ответ 1

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>

2
  • Такой вариант не подходит, так как при меньшем разрешении между блоками 2 и 3 должен стоять блок 1
    – new_user
    17 окт 2019 в 8:30
  • В таком случае я могу предложить три варианта: 1. Использовать css-grid 2. Использовать flex, но высоту и положение блока высчитывать на JS (не самый оптимальный вариант) 3. Использовать дублирование (тоже не самый лучший вариант, но более гуманный, чем через JS) 17 окт 2019 в 16:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.