w3docs logo

CSS-Eigenschaft justify-content

Die Eigenschaft justify-content richtet die Elemente aus, wenn die Elemente nicht den gesamten verfügbaren Platz horizontal nutzen. Es ist eine Untereigenschaft des Moduls Flexible Box Layout. Es steuert die Ausrichtung von Elementen, wenn sie die Linie überfluten.

Die Eigenschaft justify-content muss mit der Eigenschaft display mit ihrem Wert "flex" verwendet werden. Um die Elemente vertikal auszurichten, verwenden Sie die Eigenschaft align-items.
Anfangswert flex-start
Gilt für Flex-Containers
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.justifyContent = "center";

Syntax

Justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .center {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: center; /* Safari 6.1+ */
      display: flex;
      justify-content: center;
      }
      .center div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft Justify-content</h2>
    <p>Hier ist "justify-content: center" eingestellt:</p>
    <div class="center">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Ein Beispiel mit dem Wert "flex-start":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .start {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: flex-start; /* Safari 6.1+ */
      display: flex;
      justify-content: flex-start;
      }
      .start div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für Justify-content</h2>
    <p>Hier ist "justify-content: flex-start" eingestellt:</p>
    <div class="start">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Ein anderes Beispiel mit dem Wert "flex-end":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .end {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: flex-end; /* Safari 6.1+ */
      display: flex;
      justify-content: flex-end;
      }
      .end div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft Justify-content</h2>
    <p>Hier ist "justify-content: flex-end" eingestellt:</p>
    <div class="end">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Ein weiteres Beispiel für justify-content mit dem Wert "space-between":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .space-between {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: space-between; /* Safari 6.1+ */
      display: flex;
      justify-content: space-between;
      }
      .space-between div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft Justify-content</h2>
    <p>Hier ist "justify-content: space-between" eingestellt:</p>
    <div class="space-between">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

EinBeispiel mit dem Wert "space-around":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .space-around {
      width: 400px;
      height: 150px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: space-around; /* Safari 6.1+ */
      display: flex;
      justify-content: space-around;
      }
      .space-around div {
      width: 70px;
      height: 70px;
      background-color: #ccc;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft Justify-content</h2>
    <p>Hier ist "justify-content: space-around" eingestellt:</p>
    <div class="space-around">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
flex-start Die Elemente starten vom Anfang des Containers.
flex-end Die Elemente werden am Ende des Containers platziert.
center Die Elemente werden in der Mitte des Containers platziert.
space-around Es gibt Leerzeichen vor, zwischen und nach den Zeilen der Elemente.
space-between Es gibt einen Abstand zwischen den Zeilen der Elemente.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome firefox safari opera
29.0+
21-28 -webkit- 		28.0+ 9.0+
6.1-8.0 -webkit- 		12.1+

Übe dein Wissen

Welche der folgenden Optionen sind mögliche Werte für die CSS-Eigenschaft justify-content?
Finden Sie das nützlich?