rechtfertigen-Inhalte funktionieren anders in Flex und Grid Layouts

Question

Ich frage mich, warum justify-content

das Raster Element mit nehme den ganzen Raum

verfügbar statt, dass im Netz verwendet.

Mit justify-content: https://codepen.io/whisher/pen/JOpYdp

Ohne: https://codepen.io/whisher/pen/pdajjb

.wrapper { 
    background-color: red; 
    width: 500px; 
    height: 400px; 
    border: 2px solid #CCC; 
    display: grid; 
    grid-gap: 10px; 
    grid-template-columns: repeat(4, 80px); 
    grid-template-rows: repeat(3,100px); 
    align-content: space-around; 
    justify-content: space-between; 
} 

Ich meine, ich wie die gleiche erwarten

der Verwendung von Flex

https://codepen.io/whisher/pen/YEewaW

Answer 1

In flex Layout die vertreibt justify-content Eigenschaft Freiraum in dem Behälter zwischen oder um flex Artikel (je nach dem Wert).

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. ... Normalerweise hilft es verteilt zusätzlichen freien Speicherplatz übrig, wenn entweder alle Flex-Elemente auf eine Linie unflexibel sind, oder sind flexibel, aber haben ihr Maximum Größe erreicht.

In-Raster-Layout, die vertreibt justify-content Eigenschaft Freiraum in dem Behälter zwischen oder um Rasterspalten (in Abhängigkeit vom Wert).

Beachten Sie den Unterschied zu Flex: Hier richtet justify-content Rasterspalten aus, nicht Rasterelemente.

10.5. Aligning the Grid: the justify-content and align-content properties

wenn die äußeren Ränder des Gitters entsprechen nicht den Inhalt Kanten des Gitterbehälters (zum Beispiel, wenn keine Spalten Flex-sized), werden die Gitter Spuren innerhalb des Inhaltsfeld ausgerichtet nach zu den justify-content und align-content Eigenschaften auf dem Gitter Container.

Hier sind die Rasterspalte Spuren in Ihrem Layout ...

... ohne justify-content: space-between:

... und mit justify-content: space-between:

Hier ist ein Zusammenhang mit Post, die mit weiterem Verständnis helfen kann:

• What is the difference between align-items vs. align-content in Grid Layout?

Answer 2

justify-content: start ist der Standardwert. Die Artikel werden am Anfang des Containers positioniert.

Wenn justify-content: space-between Elemente verwendet werden, ohne Raum positioniert an den Enden

Das Äquivalent flex Raum zwischen justify-content: center

---

Dies ist, wie Raum dazwischen für die Netz definiert wäre:

space-between - platziert einen gleichmäßigen Abstand zwischen jedem Rasterelement, ohne Platz an den entfernten Enden