justify-content

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨September 2015⁩.

* Some parts of this feature may have varying levels of support.

Die CSS justify-content Eigenschaft definiert, wie der Browser den Raum zwischen und um Inhalte entlang der Hauptachse eines Flex-Containers und der Inline-Achse von Grid- und Multicol-Containern verteilt.

Das interaktive Beispiel unten zeigt einige justify-content Werte mit Hilfe eines Grid-Layouts.

Probieren Sie es aus

justify-content: start;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 220px;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  row-gap: 10px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Syntax

css

/* Positional alignment */
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;

/* Overflow alignment (for positional alignment only)*/
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

Werte

start: Die Elemente werden eng aneinandergereiht zum Start-Rand des Ausrichtungscontainers entlang der Hauptachse gepackt.
end: Die Elemente werden eng aneinandergereiht zum End-Rand des Ausrichtungscontainers entlang der Hauptachse gepackt.
flex-start: Die Elemente werden eng aneinandergereiht zum Start-Rand des Ausrichtungscontainers auf der Hauptstart-Seite des Flexcontainers gepackt. Dies gilt nur für Flex-Layout-Elemente. Für Elemente, die keine Kinder eines Flexcontainers sind, wird dieser Wert wie start behandelt.
flex-end: Die Elemente werden eng aneinandergereiht am End-Rand des Ausrichtungscontainers auf der Hauptend-Seite des Flexcontainers. Dies gilt nur für Flex-Layout-Elemente. Für Elemente, die keine Kinder eines Flexcontainers sind, wird dieser Wert wie end behandelt.
center: Die Elemente werden eng aneinander zentral innerhalb des Ausrichtungscontainers entlang der Hauptachse gepackt.
left: Die Elemente werden eng aneinandergereiht zum linken Rand des Ausrichtungscontainers gepackt. Wenn die horizontale Achse der Eigenschaft nicht parallel zur Inline-Achse ist, wie z.B. wenn flex-direction: column; gesetzt ist, verhält sich dieser Wert wie start.
right: Die Elemente werden eng aneinandergereiht zum rechten Rand des Ausrichtungscontainers entlang der geeigneten Achse gepackt. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse (in einem Grid-Container) oder der Hauptachse (in einem Flexbox-Container) ist, verhält sich dieser Wert wie start.
normal: Verhält sich wie stretch, außer im Falle von Mehrspalten-Containern mit einer nicht-auto column-width, in welchem Fall die Spalten ihre angegebene column-width annehmen, anstatt sich ausdehnen zu lassen, um den Container zu füllen. Da stretch sich in Flex-Containern wie start verhält, tut normal dies ebenfalls.
space-between: Die Elemente sind gleichmäßig innerhalb des Ausrichtungscontainers entlang der Hauptachse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist derselbe. Das erste Element liegt bündig am Hauptstart-Rand und das letzte Element liegt bündig am Hauptend-Rand.
space-around: Die Elemente sind gleichmäßig innerhalb des Ausrichtungscontainers entlang der Hauptachse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist derselbe. Der leere Raum vor dem ersten und nach dem letzten Element entspricht der Hälfte des Abstands zwischen jedem Paar benachbarter Elemente. Gibt es nur ein Element, wird es zentriert.
space-evenly: Die Elemente sind gleichmäßig innerhalb des Ausrichtungscontainers entlang der Hauptachse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente, dem Hauptstart-Rand und dem ersten Element sowie dem Hauptend-Rand und dem letzten Element ist genau derselbe.
stretch: Wenn die kombinierte Größe der Elemente entlang der Hauptachse kleiner ist als die Größe des Ausrichtungscontainers, werden alle auto-Elemente in ihrer Größe gleichmäßig (nicht proportional) vergrößert, wobei die durch max-height/max-width (oder äquivalente Funktionalität) auferlegten Einschränkungen respektiert werden, um den Ausrichtungscontainer entlang der Hauptachse genau zu füllen.

Hinweis: Für Flexboxen verhält sich der stretch Wert wie flex-start oder start. Dies liegt daran, dass in Flexboxen das Strecken mit Hilfe der flex-grow Eigenschaft gesteuert wird.
safe: Wenn das Element den Ausrichtungscontainer überläuft, wird das Element so ausgerichtet, als wäre der Ausrichtungsmodus start. Die gewünschte Ausrichtung wird nicht umgesetzt.
unsafe: Auch wenn das Element den Ausrichtungscontainer überläuft, wird die gewünschte Ausrichtung umgesetzt. Im Gegensatz zu safe, das die gewünschte Ausrichtung ignoriert, um Überlauf zu verhindern.

Beschreibung

Definiert im CSS-Box-Ausrichtung Modul, gilt justify-content für Multicol-Container, Flex-Container und Grid-Container. Die Eigenschaft gilt nicht für Block-Container und hat auf diese keinen Einfluss.

Diese Eigenschaft teilt viele Schlüsselwortwerte mit der align-content Eigenschaft, aber nicht alle! justify-content ist nicht in Baseline-Ausrichtung involviert und nimmt daher keine Baseline-Werte an.

In Flex-Layouts definiert die Eigenschaft, wie positiver freier Raum zwischen oder um Flex-Elemente entlang der Hauptachse verteilt wird. Diese Eigenschaft beeinflusst den Raum zwischen Elementen in einer Linie, nicht den Raum zwischen den Linien. Die Ausrichtung erfolgt, nachdem die Längen und automatische Ränder angewendet wurden, was bedeutet, dass, wenn eines oder mehrere Flex-Elemente in einer Linie einen flex-grow Faktor größer als 0 haben, die Eigenschaft keinen Effekt hat, da kein Raum zu verteilen ist entlang dieser Linie. Da das Strecken entlang der Hauptachse durch flex gesteuert wird, verhält sich der stretch Wert wie flex-start.

Mit Grid-Layout verteilt diese Eigenschaft den verfügbaren Raum zwischen oder um Grid-Spalten, nicht Grid-Elemente. Ist der Grid-Container größer als das Gitternetz selbst, kann die justify-content Eigenschaft verwendet werden, um das Grid entlang der Inline-Achse zu rechtfertigen, die Grid-Spalten auszurichten.

Grid auto Spurgrößen (und nur auto Spurgrößen) können durch die align-content und justify-content Eigenschaften gestreckt werden. Daher nimmt eine auto-Größe Spur standardmäßig allen verbleibenden Raum im Grid-Container ein. Da die Inline-Größe des Grids geringer als die des Grid-Containers sein muss, um Raum zu verteilen, hat die Eigenschaft in diesem Fall keinen Effekt.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	flexible Container
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

justify-content = 
  normal                                              |
  <content-distribution>                              |
  <overflow-position>? [ <content-position> | left | right ]  

<content-distribution> = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

<overflow-position> = 
  unsafe  |
  safe    

<content-position> = 
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

Beispiele

Einfaches Grid-Beispiel

In diesem Beispiel haben wir ein Grid, das schmaler ist als sein Grid-Container, und verwenden justify-content, um den verfügbaren Raum gleichmäßig um und zwischen den Grid-Spalten zu verteilen.

HTML

Der <section> Container, unser zukünftiger Grid-Container, hat 16 verschachtelte <div>s, die zu Grid-Elementen werden.

html

<section class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
</section>

CSS

.container {
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

div {
  line-height: 2em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
}

Wir setzen die Container-Breite auf 500px und geben drei Spalten an, jede 80px breit, was bedeutet, dass 260px verfügbarer Raum zu verteilen ist. Wir setzen dann justify-content: space-evenly, was bedeutet, dass es 65px Raum vor, zwischen und nach jeder Spalte gibt.

Wir setzen unterschiedliche Breiten (und Hintergrundfarben) ein, um zu demonstrieren, wie die Ausrichtung auf die Spalten angewendet wird.

css

.container {
  display: grid;
  grid: auto-flow / repeat(3, 80px);
  width: 500px;
  justify-content: space-evenly;
}

div {
  background-color: pink;
  width: 80px;
}

div:nth-of-type(n + 9) {
  width: 35px;
  background-color: lightgreen;
}

div:nth-last-of-type(3) {
  width: 250px;
  background-color: lightblue;
}

Ergebnis

Beachten Sie, dass justify-contents die Spalten ausrichtet und keinen Einfluss auf die Elemente oder die Ausrichtung in Grid-Bereichen hat. Grid-Elemente, selbst die, die ihre Grid-Zelle überschreiten, beeinflussen nicht die Spaltenausrichtung.

Der safe Schlüsselbegriff

Dieses Beispiel demonstriert den safe Schlüsselbegriff. Wir geben vier zentrierte Flex-Elemente an, die nicht umgebrochen werden dürfen und infolgedessen ihren einzeiligen Flex-Container überlaufen. Indem wir safe zu center in der justify-content Eigenschaft hinzufügen, verhält sich der überlaufende Inhalt, als wäre der Ausrichtungsmodus start.

<p><code>justify-content: center;</code></p>
<section class="container safe">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>
<p><code>justify-content: safe center;</code></p>
<section class="container safe-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>
<p><code>justify-content: safe center;</code> with 3 items</p>
<section class="container safe-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</section>

.container {
  margin: 5px auto;
  border: 1px dashed;
  box-sizing: border-box;
  background-color: lightblue;
}

div {
  line-height: 1em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
  background-color: pink;
}

Der Container ist auf center gesetzt, wobei jeder Container außer dem ersten das safe Schlüsselwort hinzugefügt hat:

css

.container {
  align-items: baseline;
  display: flex;
  width: 350px;
  height: 2em;
}

.safe {
  justify-content: center;
}

.safe-center {
  justify-content: safe center;
}

div {
  flex: 0 0 100px;
}

Ergebnis

Da ein Element den Ausrichtungscontainer überläuft, verhält sich der Ausrichtungsmodus mit safe wie start und die center Ausrichtung wird nicht umgesetzt. Der safe Schlüsselbegriff hat keinen Effekt, wenn die Elemente nicht den Container überlaufen.

Visualisierung der Flex-Element-Verteilung

Dieses Beispiel beinhaltet ein mehrzeiliges Wrap-Flex-Layout. Das zweite Flex-Element hat einen positiven Flex-Wachstumsfaktor und nimmt den gesamten verfügbaren freien Raum in der ersten Flex-Zeile ein.

CSS

#container {
  margin: 5px auto;
  border: 1px dashed black;
  box-sizing: border-box;
}

div {
  line-height: 2em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
}

css

#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between; /* Can be changed in the live sample */
  width: 510px;
}

div {
  line-height: 2em;
  flex: 0 0 120px;
  background-color: pink;
}

div:nth-of-type(2) {
  flex-grow: 1;
  background-color: yellow;
}

div:nth-of-type(n + 9) {
  flex: 0 0 35px;
  background-color: lightgreen;
}
div:last-of-type {
  flex: 0 0 300px;
  background-color: lightblue;
}

<section id="container">
  <div>A</div>
  <div>GROW</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
</section>
<select id="justifyContent">
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="space-between" selected>space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
</select>

const justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", (evt) => {
  document.getElementById("container").style.justifyContent = evt.target.value;
});

Ergebnis

Wählen Sie verschiedene Schlüsselwörter aus dem Dropdown-Menü, um die verschiedenen justify-content Schlüsselwortwerte zu visualisieren. Da ein Element in der ersten Zeile wachsen kann, gibt es keinen verfügbaren Platz in dieser Zeile, den die justify-content Eigenschaft verteilen könnte. Mit dem space-between Wert ist das erste Element jeder Zeile bündig mit dem Hauptstart-Rand und das letzte Element bündig mit dem Hauptend-Rand. Daher, wenn eine Zeile nur ein Element hat, wird dieses mit dem Hauptstart-Rand ausgerichtet (wie auf der letzten Zeile zu sehen). Dies ist nicht der Fall für andere space-* Werte wie space-evenly und space-around, die einzeilige Flex-Linien zentrieren.

Spezifikationen

Specification
CSS Box Alignment Module Level 3 # align-justify-content
CSS Flexible Box Layout Module Level 1 # justify-content-property

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden