Деконструированный блин

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

Используя flexbox для этого эффекта, вам не понадобятся медиа-запросы для настройки размещения этих элементов при изменении размера экрана.

Сокращение flex означает: flex: <flex-grow> <flex-shrink> <flex-basis> .

flex-grow

Если вы хотите, чтобы поля растягивались и заполняли пространство при переносе на следующую строку, установите значение <flex-grow> равным 1, например:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Теперь, когда вы увеличиваете или уменьшаете размер экрана, эти гибкие элементы одновременно сжимаются и увеличиваются.

Никаких растяжек

Если вы хотите, чтобы ваши блоки заполнялись до размера <flex-basis> , сжимались до меньших размеров, но не растягивались для заполнения дополнительного пространства, напишите: flex: 0 1 <flex-basis> . В этом случае ваш <flex-basis> равен 150 пикселей:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

HTML

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

CSS

        .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}