Eu configurei uma caixa flexível com dois itens que devem estar à esquerda e à direita em uma tela normal.

Se a tela não for grande o suficiente para mostrar uma ao lado da outra, ela deve ser quebrada, mas deve ser centralizada e não alinhada à esquerda.

Tentei soluções diferentes (como usarmargin: auto nos itens filhos), mas que os alinhava mais ao centro, mesmo na mesma linha.

Aqui está um exemplo 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/

O primeiro container é o posicionamento pretendido, o segundo container emula o mesmo container em uma tela menor, observe o alinhamento à esquerda.

Existe uma maneira de definir que o flexbox é alinhar itens de maneira diferente quando embalados ou posso fazê-lo apenas usando o método "@media screen" (que requer que eu defina um determinado tamanho e, portanto, não seja flexível se o tamanho dos itens alterar)?