Блог

У меня есть два макета, которые я хотел бы создать с помощью flex box, основываясь на разрешении экрана пользователя. Проблема в том, что я не могу найти способ сделать это с помощью flex, не имея другого HTML для каждого макета.

Сценарий 1: Для разрешений экрана больше X я хотел бы иметь такую компоновку.

Сценарий 2, для меньших разрешений экрана, я бы хотел, чтобы макет был таким:

HTML Мой html выглядит примерно так

 <div class="flex-container">
   <div class="flex-item1">Number 1</div>
   <div class="flex-item2>
      <p>Number 2/p>
      <div>Number 3</div>
   </div>
</div> --end container
  

CSS

    .flex-container {
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
   }
    .flex-item1 {
      width:35vw;
   }
    .flex-item2 {
       wdith:55vw;
   }
  

Я сгруппировал 2 и 3 вместе в одном div, чтобы заставить их накладываться друг на друга в соответствии с первым сценарием, но это заставляет номер 3 оставаться с правой стороны на больших дисплеях. Вместо этого мне нужен элемент под номером 3, чтобы перейти к новой строке и занять 100vw часть строки на меньших дисплеях, как показано в сценарии 2.

Я думал о двух наборах html-разделов. Один с элементами 2 и 3, объединенными в одном гибком блоке, и один, где они находятся в своих отдельных гибких блоках, и с использованием display: none / auto для их выключения и включения, но мне интересно, есть ли лучший способ сделать это?

Мне интересно, есть ли лучший способ сделать это?

Да, есть, то есть CSS Grid.

Макет, которого вы пытаетесь достичь, легко достижим с помощью CSS grid, и сетка больше подходит для такого типа макета, чем flexbox. Сетка также упростит вашу структуру HTML.

Следующий фрагмент кода показывает пример желаемого макета с использованием CSS grid.

 .container {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.item1 {
  background: peachpuff;
  grid-row: 1 / span 2;
}

.item2 {
  background: magenta;
}

.item3 {
  background: blueviolet;
}

@media (max-width: 500px) {
  .item1 {
    grid-row: 1 / span 1;
  }
  .item3 {
    grid-column: 1 / span 2;
  }
}  

 <div class="container">
  <div class="item1">Number 1</div>
  <div class="item2">Number 2</div>
  <div class="item3">Number 3</div>
</div>  

Альтернативный подход с использованием grid-template-area свойства CSS grid.

 .container {
  height: 100vh;
  display: grid;
  grid-template-areas: 'n1 n2' 'n1 n3';
}

.item1 {
  background: peachpuff;
  grid-area: n1;
}

.item2 {
  background: magenta;
  grid-area: n2;
}

.item3 {
  background: blueviolet;
  grid-area: n3;
}

@media (max-width: 500px) {
  .container {
    grid-template-areas: 'n1 n2' 'n3 n3';
  }
}  

 <div class="container">
  <div class="item1">Number 1</div>
  <div class="item2">Number 2</div>
  <div class="item3">Number 3</div>
</div>  

Вы можете легко сделать это с помощью flexbox. Просто сделайте это своим CSS, и он будет работать:

 .flex-container {
    display: flex;
    flex-flow: column wrap;
    height: 100%;
}
.flex-item-1 {
    background: #7dc5ed;
    flex-basis: 100%;
}
.flex-item-2 {
    background: #bb6fad;
    flex-basis: 50%;
}
.flex-item-3 {
    background: #6560ab;
    flex-basis: 50%;
}
@media (min-width: 768px) {
    .flex-container {
        flex-flow: row wrap;
    }
    .flex-item-1 {
        flex-basis: 50%;
    }
    .flex-item-2 {
        flex-basis: 50%;
    }
    .flex-item-3 {
        flex-basis: 100%;
    }
}