W3Docs

Darstellung

Deutsch

CSS-justify-items-Eigenschaft ​

Die Eigenschaft justify-items definiert das Standard-justify-self für alle untergeordneten Boxen und gibt ihnen damit eine Standardmethode, jede Box entlang der passenden Achse auszurichten. Anders als justify-self, das einzelne Elemente anspricht, gilt justify-items für den gesamten Container.

Die Eigenschaft justify-items wird hauptsächlich mit Grid-Layouts verwendet, gilt aber auch für:

  • absolut positionierte Elemente
  • Grid-Container

Hinweis: justify-items wirkt sich hauptsächlich auf Grid-Container und absolut positionierte Elemente aus. In Flexbox-Layouts wird diese Eigenschaft ignoriert.

Anfangswertauto
Gilt fürGrid-Container und absolut positionierte Elemente.
VererbtNein.
AnimierbarNein.
VersionCSS3
DOM-Syntaxobject.style.justifyItems = "start";

Syntax ​

CSS-Werte für justify-items

css
justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first-baseline | last-baseline | stretch | safe | unsafe | legacy | initial | inherit;

Beispiel: justify-items mit dem Wert "start" ​

CSS-justify-items-Codebeispiel

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: start;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Ergebnis ​

CSS justify-items start

Beispiel: justify-items mit dem Wert "center" ​

CSS-justify-items-Codbeispiel

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: center;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Beispiel: justify-items mit dem Wert "first-baseline" ​

Beispiel für die Eigenschaft justify-items mit dem Wert "first-baseline":

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: grid;
        padding-top: 10px;
        height: 250px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        background: #ccc;
        justify-items: first-baseline;
      }
      .item {
        width: 50%;
        height: 50%;
        text-align: center;
      }
      .item1 {
        background: red;
      }
      .item2 {
        background: blue;
      }
      .item3 {
        background: green;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div class="container">
      <div class="item1 item">1</div>
      <div class="item2 item">2</div>
      <div class="item3 item">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Beispiel: justify-items mit dem Wert "self-end" ​

Beispiel für die Eigenschaft justify-items mit dem Wert "self-end":

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: self-end;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Werte ​

WertBeschreibung
autoWenn die Box keinen Elternteil hat oder absolut positioniert ist, steht der Wert auto für normal.
normalDie Wirkung hängt vom Layout-Modus ab: <br>• Block-Layouts: Verhält sich wie start. <br>• Absolut positionierte Layouts: Verhält sich bei ersetzten Elementen wie start und bei anderen wie stretch. <br>• Tabellenzellen: Wird ignoriert. <br>• Flexbox: Wird ignoriert. <br>• Grid-Layouts: Verhält sich wie stretch, außer bei Elementen mit einem Seitenverhältnis oder intrinsischer Größe, bei denen es sich wie start verhält.
startAlle Elemente werden an der Startkante (linken Kante) des Containers aneinander ausgerichtet.
endAlle Elemente werden an der Endkante (rechten Kante) des Containers aneinander ausgerichtet.
flex-startElemente werden am Anfang des Containers platziert.
flex-endElemente werden am Ende des Containers platziert.
self-startDem Element ist es erlaubt, sich anhand seiner eigenen Startseite an der Containerkante zu platzieren.
self-endDem Element ist es erlaubt, sich anhand seiner eigenen Endseite an der Containerkante zu platzieren.
centerElemente werden nebeneinander in Richtung der Mitte des Containers positioniert.
leftElemente werden nebeneinander zur linken Seite des Containers platziert. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie end.
rightElemente werden nebeneinander zur rechten Seite des Containers platziert. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie start.
baselineRichtet alle Elemente innerhalb einer Gruppe aus, indem ihre Ausrichtungs-Baselines übereinandergelegt werden.
first-baselineRichtet alle Elemente innerhalb einer Gruppe aus, indem ihre ersten Ausrichtungs-Baselines übereinandergelegt werden.
last-baselineRichtet alle Elemente innerhalb einer Gruppe aus, indem ihre letzten Ausrichtungs-Baselines übereinandergelegt werden.
stretchStreckt das Element, damit es entlang der Inline-/Hauptachse in den Container passt.
safeWenn die Größe des Elements den Ausrichtungs-Container überläuft, wird das Element so ausgerichtet, als wäre der Ausrichtungsmodus start.
unsafeUnabhängig von der Größe des Elements und des Ausrichtungs-Containers wird der Ausrichtungswert berücksichtigt.
legacyVeraltetes Schlüsselwort zur Abwärtskompatibilität. Wird je nach Layout-Modus auf flex-start, flex-end oder center abgebildet. Beeinflusst die Vererbung nicht.
initialDadurch verwendet die Eigenschaft ihren Standardwert.
inheritDie Eigenschaft wird vom Elternelement geerbt.

Practice ​

What does the CSS 'justify-items' property do?

Finden Sie das nützlich?

Dual-run-Vorschau — vergleichen Sie mit den Symfony-Routen live.