DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft justify-content ist eine Untereigenschaft des Flexible Box Layout Moduls.
Sie definiert die Ausrichtung entlang der Hauptachse. Sie hilft bei der Verteilung von zusätzlichem freiem Speicherplatz, der übrig bleibt, wenn entweder alle Flex-Elemente in einer Zeile unflexibel sind oder flexibel sind, aber ihre maximale Größe erreicht haben. Sie übt auch einige Kontrolle über die Ausrichtung von Elementen aus, wenn diese die Zeile überlaufen.
Die Eigenschaft justify-content akzeptiert fünf verschiedene Werte
flex-start(Standard): Elemente werden zum Anfang der Zeile gepacktflex-end: Elemente werden zum Ende der Zeile gepacktcenter: Elemente werden entlang der Zeile zentriertspace-between: Elemente werden gleichmäßig in der Zeile verteilt; das erste Element befindet sich am Anfang der Zeile, das letzte Element am Ende der Zeilespace-around: Elemente werden gleichmäßig in der Zeile mit gleichem Abstand um sie herum verteiltspace-evenly: Elemente werden so verteilt, dass der Abstand zwischen zwei beliebigen benachbarten Ausrichtungssubjekten, vor dem ersten Ausrichtungssubjekt und nach dem letzten Ausrichtungssubjekt gleich ist
Die folgende Abbildung hilft zu verstehen, was die Eigenschaft justify-content tatsächlich bewirkt
Syntax
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
.flex-item {
justify-content: center;
}Demo
Die folgende Demo zeigt, wie sich Flex-Elemente je nach Wert von justify-content verhalten
- Die rote Liste ist auf
flex-starteingestellt - Die gelbe ist auf
flex-endeingestellt - Die blaue ist auf
centereingestellt - Die grüne ist auf
space-betweeneingestellt - Die pinkfarbene ist auf
space-aroundeingestellt - Die hellgrüne ist auf
space-evenlyeingestellt
Browser-Unterstützung
Diese Browser-Support-Daten stammen von Caniuse, das mehr Details bietet. Eine Zahl zeigt an, dass der Browser die Funktion ab dieser Version und höher unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 21* | 28 | 11 | 12 | 6.1* |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4 | 7.0-7.1* |
Blackberry Browser 10+ unterstützt die neue Syntax.
Laut unserem letzten Update vom Dezember 2018 gewinnt justify-content: space-evenly; an Unterstützung. Es gibt einen Arbeitsentwurf der Spezifikation dazu.
Diese Daten zur Browserunterstützung stammen von Caniuse, wo weitere Details zu finden sind. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 60 | 52 | Nein | 79 | 11 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 11.0-11.2 |
Weitere Informationen darüber, wie man Syntaxen mischt, um die beste Browserunterstützung zu erzielen, finden Sie in unserem Artikel „Using Flexbox“.
Weitere Informationen
- CSS Flexible Box Layout Module Level 1
- Wie man CSS Grid verwendet, um Inhalte und Elemente zu justieren und auszurichten
- Ein vollständiger Leitfaden zu Flexbox
- Verwendung von Flexbox
- Altes Flexbox und neues Flexbox
Verwandte Anleitungen
Verwandte Tricks!
Eine schnelle Methode, um sich den Unterschied zwischen `justify-content` und `align-items` zu merken
Einen Konferenzplan mit CSS Grid erstellen
Zentrieren: Der neueste coole Weg vs. der älteste coole Weg
Layout in einer multidirektionalen Website steuern
Spaß mit der Größenanpassung von Grid-Elementen
Bitte geben Sie mir etwas Platz
Verwandt
align-content
.element { align-content: space-around; }
align-items
.element { align-items: flex-start; }
align-self
.box { align-self: flex-end; }
display
.element { display: inline-block; }
flex-direction
.element { flex-direction: column-reverse; }
flex-flow
.element { flex-flow: row wrap; }
flex-wrap
.example { flex-wrap: wrap; }
justify-items
.element { justify-items: center; }
justify-self
.element { justify-self: stretch; }
place-content
place-items
.element { place-items: center; }
place-self
Die Demo wird in Safari, sowohl Desktop als auch iOS, nicht korrekt angezeigt. Haben Sie eine Idee, warum? Ich habe alle verschiedenen Präfixe und Syntaxen ausprobiert und nichts scheint zu funktionieren.
Verwenden Sie das.
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
Ich glaube, dass justify-content weder in Safari noch in iOS unterstützt wird. Ich denke, dieser Artikel bezieht sich tatsächlich auf die Unterstützung für Flexbox und nicht auf die eigentliche Eigenschaft, die er bespricht.
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Browser_compatibility
Ich habe das gerade auch getestet
habe einen Test
Ich habe festgestellt, dass die Eigenschaft -webkit-box-pack in Safari/iOS ziemlich ähnlich wie justify-content funktioniert (zumindest in meinen Testfällen). Siehe die Safari-Dokumentation.
Ich frage mich, wie man space-around kleiner oder größer machen kann, wie wir es wünschen…
@kuyseng Wenn Sie gleichen Abstand zwischen den Elementen meinen, aber dichter gepackt, verkürzen Sie einfach den Container oder fügen Sie etwas Polsterung hinzu, um die Elemente zusammenzudrücken. Wenn Sie ungleichen Abstand meinen (z. B. den Abstand zwischen den ersten beiden Elementen schmaler machen als die nächste Lücke), würde ich leere Divs zwischen den Elementen mit flex-grow-Attributen hinzufügen, um festzulegen, wie der verfügbare Platz zwischen den Lücken aufgeteilt werden soll. Ihr HTML wird nicht so sauber sein, aber Sie erhalten viel Kontrolle, z. B. Abstand vor dem ersten Element, aber nicht nach dem letzten usw.
In Safari funktioniert es nicht.
In WinJs scheint es überhaupt nicht zu funktionieren.
Für ein besseres Verständnis der Eigenschaft „display:flex“ schauen Sie sich das an. Ich fand es leichter zu verstehen, indem ich mit einem CSS-Editor gespielt habe.
http://flexboxfroggy.com/
Hallo!
Ich habe versucht, „justify-content“ in Sublime Text 2 zu verwenden, aber es scheint nicht zu funktionieren.
Muss ich mein ST2 aufrüsten oder ist das einfach unmöglich?
Vielen Dank im Voraus.
Bin ich der Einzige, oder ist der Begriff „justify“ hier völlig falsch? Im typografischen Kontext ist „Justified“ Text Text, der so angepasst ist, dass das erste und letzte Element einer Zeile links und rechts verankert sind und die mittleren Elemente gleichmäßig verteilt sind.
Die Eigenschaften „space-between“ und „space-around“ würden dies wahrscheinlich treffend zeigen, aber die Eigenschaften „flex-start“ und „flex-end“ haben absolut nichts mit „Justifying“ zu tun.
Es ärgert mich wirklich, wenn Kunden Text als „linksbündig“ bezeichnen, obwohl sie eigentlich „linksbündig ausgerichtet“ meinen.
Nur ich?
Ich bin mir ziemlich sicher, dass justify-content: space-evenly zum heutigen Datum (4. August 2017) noch nicht verfügbar ist. Es scheint in Firefox zu funktionieren; ich kann jedoch nichts finden, das dies explizit aussagt. Kann das jemand bestätigen? Danke.
Ab diesem Datum, ja, Sie haben Recht.
Es funktioniert auch in Chrome. Ich bin auf Version 60.0.3112.90 und
justify-content: space-evenlyfunktioniert einwandfrei.Ich benutze auch Chrome und
space-evenlyfunktioniert großartig. Ich hoffe, die anderen Browser unterstützen es bald, da ich das Aussehen in meinem aktuellen Projektspace-aroundvorziehe.space-evenly funktioniert derzeit nicht in Safari auf dem iPhone 6 :(
Die Option ist kein Attribut eines Flex-Items, sondern des Flex-Containers.
Wenn wir einen Flex-Fallback mit Floats definieren, kann ein
.clearfixauf dem Wrapper-Element notwendig sein. Aber der übliche Pseudo-Element-Clearfix verursacht Probleme mit der Deklarationjustify-content: space-between, da er als zusätzliches Flex-Element reagiert. D. h. der Abstand wird ungleichmäßig verteilt.In diesem Fall müssen wir den Abstand manuell verteilen (
margin-x: auto;) oder eine andere Clearfix-Methode verwenden, die andere Probleme verursachen kann.Irgendwelche anderen Workarounds dafür?
Hallo, ich denke, der Syntax-Abschnitt ist etwas irreführend, da justify-content eine Flex-Container-Eigenschaft und keine Flex-Item-Eigenschaft ist, also sollte es sein
.flex-container {
justify-content: center;
}
anstelle von
.flex-item {
justify-content: center;
}
Ich versuche, das gleiche Ergebnis mit
justify-contentzu erzielen wie mit{align-items:stretch}Irgendwelche Ideen, wie das sicher über verschiedene Geräte hinweg erreicht werden kann?
Idealerweise müsste ich auch
{justify-content: flext-start}überschreiben können, zum Beispiel.Ich habe
{justify-content: stretch}verwendet, aber die Ergebnisse sind gemischt.Das ist so frustrierend. Die Auswirkung von display:flex und justify-content besteht nicht nur darin, kleine Elemente entlang der Hauptachse auszurichten, sondern auch entlang der Querachse umzubrechen. Ich kann keine Informationen darüber finden, warum Elemente entlang der Querachse nicht bündig aneinander liegen, wenn sie umgebrochen werden!