Änderung rechtfertigen Inhalt Wert, wenn flex Artikel Container

Question

Blick Überlauf auf folgende Geige https://jsfiddle.net/27x7rvx6

Die CSS (#test ist Flexbox Container und .items sind seine Kinder):

#test { 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: center; 
    width: 300px; 
    margin-left: 150px; 
    border: 2px solid red; 
} 
.item { 
    flex: 0 0 70px; 
    margin-right: 10px; 
    background: blue; 
    height: 70px; 
    border: 2px solid black; 
} 

Es gibt eine eine Zeile (nowrap) Flexbox mit festen Größen. Der Container hat justify-content auf center festgelegt. Da die Gegenstände nicht zusammenschrumpfen können und breiter sind als der Behälter, beginnen sie zu überlaufen.

Mein Problem ist, dass der Inhalt sowohl nach links als auch nach rechts überläuft. Gibt es eine Möglichkeit, den Inhalt gerecht zu zentrieren, aber sobald er zu überlaufen beginnt, verhält er sich so, als ob die justify-content Eigenschaft auf flex-start gesetzt ist. Überlaufen Sie es nur rechts vom Container?

Answer 1

justify-content ist nicht der richtige Ansatz für Center wegen des Problems, das Sie beschreiben.

Stattdessen empfehle ich auto margins. Sie können sie zum Zentrum verwenden:

Vor der Ausrichtung über justify-content und align-self, jeden positiven freien Raum zu Autopannen in dieser Dimension verteilt wird.

Und sie verhalten sich wie Sie mit Überlauf wollen:

Overflowing Boxen ignorieren ihre Autopannen und Überlauf in der end Richtung.

Zum Beispiel können Sie margin-left: auto zur ersten Flexpunkt gesetzt und margin-right: auto auf die letzte, oder legen Sie ::before und ::after Pseudo-Elemente.

.test { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    width: 200px; 
 
    border: 2px solid red; 
 
    margin: 10px; 
 
} 
 
.wide.test { 
 
    width: 500px; 
 
} 
 
.test::before, .test::after { 
 
    content: ''; /* Insert pseudo-element */ 
 
    margin: auto; /* Make it push flex items to the center */ 
 
} 
 
.item { 
 
    flex: 0 0 50px; 
 
    margin-right: 10px; 
 
    background: blue; 
 
    height: 50px; 
 
    border: 2px solid black; 
 
}

<div class="test"> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
</div> 
 
<div class="wide test"> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
</div>