Panqueque desarmado

Este es un diseño común para los sitios de marketing, por ejemplo, que pueden tener una fila de tres elementos, por lo general, con una imagen, un título y, luego, un texto que describe algunas características de un producto. En pantallas más pequeñas, es recomendable que se almacenen bien y se expandan a medida que aumentas el tamaño de la pantalla.

Si usas flexbox para este efecto, no necesitarás consultas de medios para ajustar la ubicación de estos elementos cuando se cambie el tamaño de la pantalla.

La abreviatura flex significa flex: <flex-grow> <flex-shrink> <flex-basis>.

Si deseas que los cuadros se estiren y llenen el espacio a medida que se unen a la siguiente línea, establece el valor de <flex-grow> en 1, por ejemplo:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Ahora, a medida que aumentas o disminuyes el tamaño de la pantalla, estos elementos flex se contraen y crecen.

Sin estiramiento

Si deseas que tus cuadros se expandan hasta su tamaño <flex-basis>, se contraigan en tamaños más pequeños, pero no se estiren para llenar cualquier espacio adicional, escribe: flex: 0 1 <flex-basis>. En este caso, tu <flex-basis> es de 150 px:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}
<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

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

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