ch habe eine Flexbox mit zwei Elementen eingerichtet, die sich auf einem normalen Bildschirm links und rechts befinden sollte

Wenn der Bildschirm nicht groß genug ist, um beide nebeneinander anzuzeigen, sollte er umbrochen werden, aber dann sollten sie zentriert und nicht links ausgerichtet sein.

Ich habe verschiedene Lösungen ausprobiert (zB mitmargin: auto für die untergeordneten Elemente), aber dadurch werden sie auch in derselben Zeile mehr zur Mitte ausgerichtet.

Hier ist ein vereinfachtes Beispiel:

.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

Der erste Container ist die beabsichtigte Position, der zweite Container emuliert denselben Container auf einem kleineren Bildschirm. Beachten Sie die Ausrichtung links.

Ist es eine Möglichkeit zu definieren, dass die Flexbox die Elemente beim Umwickeln anders ausrichtet, oder kann ich dies nur mit der Methode "@media screen" tun (für die ich eine bestimmte Größe festlegen muss und die daher nicht flexibel ist, wenn die Größe der Artikeländerungen)?