Panqueque desarmado

Este es un diseño común para los sitios de marketing, por ejemplo, que puede tener una fila de tres elementos, generalmente con una imagen, un título y luego algo de texto que describe algunas características de un producto. En pantallas más pequeñas, querrás que se apilen bien y se expandan a medida que aumentes 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>.

Estiramientos de flex-grow

Si quieres que los cuadros se estiren y llenen el espacio a medida que pasan a la línea siguiente, 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 flexibles se contraen y aumentan.

Sin estiramientos

Si quieres que los cuadros se llenen hasta alcanzar el tamaño de <flex-basis>, redúcelos en tamaños más pequeños, pero no estiren para llenar el 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;
}

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;
}