Zentrieren Sie flexible Artikel auf der Verpackung

Ich habe eine Flexbox mit zwei Elementen eingerichtet, die auf einem normalen Bildschirm links und rechts sein sollten.

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

Ich habe verschiedene Lösungen ausprobiert (wie die Verwendung von margin: auto auf den untergeordneten Elementen), aber dadurch wurden sie mehr in der Mitte ausgerichtet, selbst wenn sie sich in derselben Reihe befinden.

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 Positionierung, der zweite Container emuliert denselben Container auf einem kleineren Bildschirm, beachten Sie die Ausrichtung nach links.

Gibt es eine Möglichkeit zu definieren, dass die Flexbox die Elemente beim Umwickeln anders ausrichten soll, oder kann ich dies nur mit der Methode “@media screen” tun (bei der ich eine bestimmte Größe festlegen muss und daher nicht flexibel ist, wenn die Größe der Elemente Änderungen)?

Dies funktioniert in Ihrem Fall möglicherweise nicht, aber es lohnt sich, diesen weniger bekannten Unterschied zwischen zu erwähnen justify-content: space-between und justify-content: space-around.

Aus der Flexbox-Spezifikation:

8.2. Achsenausrichtung: die justify-content Eigentum

Das justify-content -Eigenschaft richtet Flex-Elemente entlang der Hauptachse der aktuellen Zeile des Flex-Containers aus.

Es gibt fünf Werte, die zutreffen justify-content. Hier sind zwei davon:

space-between

Flex-Artikel werden gleichmäßig in der Linie verteilt.

Wenn der verbleibende freie Speicherplatz negativ ist oder es nur ein einzelnes Flex-Element in der Zeile gibt, ist dieser Wert identisch mit flex-start.

Dies erklärt, warum Ihre Artikel auf der Verpackung linksbündig ausgerichtet sind space-between.

Nun schau zu space-around:

space-around

Flex-Artikel sind gleichmäßig in der Linie verteilt, mit Zwischenräumen halber Größe an beiden Enden.

Wenn der verbleibende freie Speicherplatz negativ ist oder es nur ein einzelnes Flex-Element in der Zeile gibt, ist dieser Wert identisch mit center.

Ziehen Sie daher die Verwendung von in Betracht, um Flex-Elemente auf der Verpackung zentriert auszurichten space-around.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* ADJUSTMENT */
  border: 1px solid black;
}
.item {
  width: 200px;
  height: 100px;
  background-color: blue;
  margin: 25px;
}

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

Überarbeitete Geige