He configurado una caja flexible con dos elementos que deben estar a la izquierda y a la derecha en una pantalla normal.

Si la pantalla no es lo suficientemente grande como para mostrar ambos uno al lado del otro, debe ajustarse pero luego deben estar centrados y no alineados a la izquierda.

Probé diferentes soluciones (como usarmargin: auto en los elementos secundarios), pero eso los alineó más al centro incluso en la misma fila.

Aquí hay un ejemplo simplificado:

.container {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}
.large {
  width: 500px;
}
.small {
  width: 175px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 25px 0px;
}

<div class="container large">
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container small">
  <div class="item"></div>
  <div class="item"></div>
</div>

https://jsfiddle.net/SoWhy/zfx4ub8x/

El primer contenedor es el posicionamiento previsto, el segundo contenedor emula el mismo contenedor en una pantalla más pequeña, observe la alineación a la izquierda.

¿Hay alguna manera de definir que el flexbox es para alinear elementos de manera diferente cuando se envuelve o solo puedo hacerlo usando el método "@media screen" (que requiere que establezca un cierto tamaño y, por lo tanto, no es flexible si el tamaño de los elementos cambios)?