Блог

Главная - Вопросы по программированию - Как я могу добиться различного порядка гибких элементов в зависимости от медиа-экрана?

Как я могу добиться различного порядка гибких элементов в зависимости от медиа-экрана?

#html #css

Вопрос:

Я пытаюсь реализовать отображение элементов div, как на изображении, показанном ниже, с помощью свойства display: flex. Слева показано, как это должно отображаться на экранах мобильных устройств, а справа-как это должно отображаться на больших экранах. Мне интересно, может ли кто-нибудь мне помочь, так как я вообще не могу этого сделать.

введите описание изображения здесь

Комментарии:

1. было бы проще с сеткой. Что вы пробовали до сих пор? Альтернативно найдите сетку или макет кладки и покажите свою попытку.

2. Вы не можете сделать это с помощью flex, так как он работает только в «2D». Вы можете использовать сетку, которая позволяет упорядочивать элементы одновременно по горизонтали и вертикали. Прочитайте moderncss.dev/3-методы css-сетки, чтобы преобразовать вас в сетку, в качестве вступления к сетке.

Ответ №1:

вы должны использовать css grid вместо этого, это намного проще.

см. фрагмент:

 .grid {
  display: grid;
  grid-template-areas: "g1 g1 g1 g2" "g3 g3 g4 g2" ". . g4 .";
  gap: 10px;
  grid-auto-rows: 1fr
}

.g1 {
  background: red;
  grid-area: g1;
  min-height: 60px;
}

.g2 {
  background: green;
  grid-area: g2;
  min-height: 60px;
}

.g3 {
  background: blue;
  grid-area: g3;
  min-height: 60px;
}

.g4 {
  background: yellow;
  grid-area: g4;
  min-height: 60px;
}

@media (max-width: 500px) {
  .grid {
    grid-template-areas: "g1" "g2" "g3" "g4";
  }
} 
 <div class='grid'>
  <div class='g1'>1</div>
  <div class='g2'>2</div>
  <div class='g3'>3</div>
  <div class='g4'>4</div>
</div>
Метки: