Center Flex Artikel auf Wrap

Question

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

Wenn der Bildschirm nicht groß genug ist, um beide nebeneinander anzuzeigen, sollte es sich umwickeln, aber dann sollten sie zentriert und nicht auf der linken Seite ausgerichtet sein.

Ich versuchte verschiedene Lösungen (wie margin: auto auf die untergeordneten Elemente verwenden), aber das ausgerichtet sie mehr auf das Zentrum, auch wenn in der gleichen Zeile.

hier ein vereinfachtes Beispiel ist:

.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 Behälter ist die beabsichtigte Positionierung, der zweite Behälter auf einem kleineren Bildschirm denselben Behälter emuliert Beachten richten Sie nach links aus.

Gibt es eine Möglichkeit, zu definieren, dass die flexbox Objekte beim Umbrechen anders ausrichten soll oder nur mit der "@media screen" -Methode (die eine bestimmte Größe erfordert und daher nicht flexibel ist, wenn die Größe der Artikel ändert sich)?

Answer 1

Hinweis: Sie müssen Medienabfrage für verschiedene Breiten verwenden.

Keine Möglichkeit zu erkennen, wenn es mit css3 umhüllt ist.

Wenn Sie möchten Artikel display:inline-flex und justify-content: center; zum Behälter verwenden Zentrum und margin: 0 auto; Klasse item

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

Es wickelt, wenn die Behältergröße von weniger als 200 Pixel ist.

Click to see center aligned example in JsFiddle

Wenn Sie flex-wrap: nowrap in einzelnen Positionen zu halten - die Flex-Elemente Kräfte in einer einzigen Zeile zu bleiben gezwungen.

So wird der Stil für .container wie folgt aussehen.

.container { 
    display: flex; 
    align-items: flex-end; 
    flex-wrap: nowrap; 
    justify-content: space-between; 
    border: 1px solid black; 
    margin-bottom: 25px; 
} 

Click to see items forced to stay single line in JsFiddle

Answer 2

Dies kann nicht in Ihrem Fall arbeiten, aber es lohnt sich dieses weniger bekannte Unterschied zwischen justify-content: space-between und justify-content: space-around zu erwähnen.

Von der Flexbox Spezifikation:

8.2. Axis Alignment: the justify-content property

Die justify-content Eigenschaft richtet flex Elemente entlang der Hauptachse der aktuellen Zeile des flexiblen Behälters.

Es gibt fünf Werte, die für gelten. Hier sind zwei von ihnen:

space-between

Flex Elemente sind gleichmäßig in der Linie verteilt.

Wenn der verbleibende freie Speicherplatz negativ ist oder nur ein einzelner Flex-Eintrag in der Zeile vorhanden ist, ist dieser Wert identisch mit flex-start.

Dies erklärt, warum Ihre Artikel links auf Wrap mit space-between ausgerichtet sind.

Nun ein Blick auf space-around:

space-around

Flex Elemente werden in der Linie, mit halber Größe Räume an beiden Enden gleichmäßig verteilt.

Wenn der verbleibende Freiraum negativ ist oder nur ein Flex-Element in der Linie vorhanden ist, ist dieser Wert identisch mit center.

damit zur Mitte auszurichten flex Elemente auf Wrap, betrachten space-around verwenden.

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

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

Revised Fiddle