Блог

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

Сделать гибкие элементы отзывчивыми

#html #css #flexbox

Вопрос:

Я хочу, чтобы эти элементы реагировали, проблема, с которой я сталкиваюсь, заключается в том, что, как только элементы увеличиваются до 300 пикселей, четвертый элемент опускается, и он становится 3 элементами вверху, а четвертый элемент находится один внизу во всю ширину. Я хочу, чтобы они всегда были 4, 2 х 2 и 1 х 4 по мере уменьшения размера экрана.

 .wrapper {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 300px;
  flex-grow: 2;
  height: 40rem;
  color: #fff;
  background-color: black;
} 
 <div class="wrapper">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

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

1. Вам следует рассмотреть возможность использования сетки

Ответ №1:

Пример того, что вы хотите с display: grid; 

 .wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  grid-template-rows: repeat(2, minmax(200px, 1fr));
  gap: 10px;
}

.item {
  color: #fff;
  background-color: orange;
}

@media screen and (max-width: 580px) {
  .wrapper {
    grid-template-columns: auto;
    grid-template-rows: repeat(4, minmax(200px, 1fr));
  }
}
@media screen and (min-width: 1280px) {
  .wrapper {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
  }
} 
 <div class="wrapper">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
    </div>

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

1. это не делает 4 элемента на рабочем столе, он начинается с 2 x2, а затем 1 x 4

2. Я обновил представление кода и добавил дополнительный медиа-запрос. Или вы имеете в виду 4×4 на рабочем столе ?

Метки: