justify-items

Probieren Sie es aus

justify-items: stretch;

justify-items: center;

justify-items: start;

justify-items: end;

<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;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

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

Die Wirkung dieser Eigenschaft hängt vom Layoutmodus ab, in dem wir uns befinden:

• In blockbasierten Layouts richtet sie die Elemente innerhalb ihres umgebenden Blocks entlang der Inline-Achse aus.
• Für absolut positionierte Elemente richtet sie die Elemente innerhalb ihres umgebenden Blocks entlang der Inline-Achse aus, wobei die Offset-Werte von oben, links, unten und rechts berücksichtigt werden.
• In Tabellenzellen-Layouts wird diese Eigenschaft ignoriert (siehe Box-Ausrichtung für Block-, absolut positionierte und Tabellen-Layouts).
• In Flexbox-Layouts wird diese Eigenschaft ignoriert (siehe Box-Ausrichtung in Flexbox).
• In Grid-Layouts richtet sie die Elemente innerhalb ihrer Gitterbereiche entlang der Inline-Achse aus (siehe Box-Ausrichtung in Grid-Layouts).

Syntax

/* Basic keywords */
justify-items: normal;
justify-items: stretch;

/* Positional alignment */
justify-items: center; /* Pack items around the center */
justify-items: start; /* Pack items from the start */
justify-items: end; /* Pack items from the end */
justify-items: flex-start; /* Equivalent to 'start'. Note that justify-items is ignored in flexbox layouts. */
justify-items: flex-end; /* Equivalent to 'end'. Note that justify-items is ignored in flexbox layouts. */
justify-items: self-start;
justify-items: self-end;
justify-items: left; /* Pack items from the left */
justify-items: right; /* Pack items from the right */
justify-items: anchor-center;

/* Baseline alignment */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

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

/* Legacy alignment */
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

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

Diese Eigenschaft kann eine von vier verschiedenen Formen annehmen:

• Grundlegende Schlüsselwörter: eines der Schlüsselwortwerte normal oder stretch.
• Basislinienausrichtung: das Schlüsselwort baseline, plus optional eines von first oder last.
• Positionsausrichtung: eines von: center, start, end, flex-start, flex-end, self-start, self-end, left oder right. Zusätzlich optional safe oder unsafe.
• Legacy-Ausrichtung: das Schlüsselwort legacy, gefolgt von einem der folgenden: left oder right.

Werte

normal

Die Wirkung dieses Schlüsselwortes hängt vom Layoutmodus ab, in dem wir uns befinden:

• In blockbasierten Layouts ist das Schlüsselwort ein Synonym für start.
• In absolut positionierten Layouts verhält sich das Schlüsselwort wie start bei ersetzten absolut positionierten Boxen und wie stretch bei allen anderen absolut positionierten Boxen.
• In Tabellenzellen-Layouts hat dieses Schlüsselwort keine Bedeutung, da diese Eigenschaft ignoriert wird.
• In Flexbox-Layouts hat dieses Schlüsselwort keine Bedeutung, da diese Eigenschaft ignoriert wird.
• In Grid-Layouts führt dieses Schlüsselwort zu einem Verhalten, das dem von stretch ähnelt, außer bei Boxen mit einem Aspektverhältnis oder einer intrinsischen Größe, wo es sich wie start verhält.

start

Das Element wird bündig zur Startkante des Ausrichtungscontainers in der entsprechenden Achse gepackt.

end

Das Element wird bündig zur Endkante des Ausrichtungscontainers in der entsprechenden Achse gepackt.

flex-start

Für Elemente, die keine Kinder eines Flex-Containers sind, wird dieser Wert behandelt wie start.

flex-end

Für Elemente, die keine Kinder eines Flex-Containers sind, wird dieser Wert behandelt wie end.

self-start

Das Element wird bündig zur Kante des Ausrichtungscontainers auf der Startseite des Elements gepackt, in der entsprechenden Achse.

self-end

Das Element wird bündig zur Kante des Ausrichtungscontainers auf der Endseite des Elements gepackt, in der entsprechenden Achse.

center

Die Elemente werden bündig zur Mitte des Ausrichtungscontainers gepackt.

left

Die Elemente werden bündig zur linken Kante des Ausrichtungscontainers gepackt. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie start.

right

Die Elemente werden bündig zur rechten Kante des Ausrichtungscontainers in der entsprechenden Achse gepackt. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie start.

baseline, first baseline, last baseline

Gibt die Teilnahme an der ersten oder letzten Basislinienausrichtung an: richtet die Ausrichtungsbasislinie des ersten oder letzten Basisliniensatzes der Box mit der entsprechenden Basislinie im gemeinsamen ersten oder letzten Basisliniensatz aller Boxen in ihrer Basislinien-Sharing-Gruppe aus. Die Fallback-Ausrichtung für first baseline ist start, die für last baseline ist end.

stretch

Wenn die kombinierte Größe der Elemente kleiner als die Größe des Ausrichtungscontainers ist, wird die Größe von auto-großen Elementen gleich (nicht proportional) erhöht, wobei die durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Einschränkungen eingehalten werden, sodass die kombinierte Größe genau den Ausrichtungscontainer ausfüllt.

anchor-center

Im Fall von ankerpositionierten Elementen richtet es die Elemente in der Inline-Richtung auf die Mitte des zugehörigen Ankerelements aus. Siehe Zentrierung auf dem Anker mit anchor-center.

safe

Wenn die Größe des Elements den Ausrichtungscontainer überschreitet, wird das Element stattdessen so ausgerichtet, als wäre der Ausrichtungsmodus start.

unsafe

Unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers wird der angegebene Ausrichtungswert eingehalten.

legacy

Macht den Wert von den Box-Nachkommen erbbar. Beachten Sie, dass wenn ein Nachkomme den Wert justify-self: auto hat, das Schlüsselwort legacy vom Nachkommen nicht berücksichtigt wird, sondern nur der damit verknüpfte left, right oder center-Wert.

Formale Definition

Formale Syntax

justify-items = 
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  legacy                                              |
  legacy && [ left | right | center ]                 |
  anchor-center                                       |
  dialog                                              

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

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

Beispiele

Grundlegende Demonstration

In diesem Beispiel haben wir ein 2 x 2 Grid-Layout. Zunächst erhält der Grid-Container den justify-items-Wert stretch (der Standardwert), was bewirkt, dass die Grid-Elemente sich über die gesamte Breite ihrer Zellen erstrecken.

Wenn Sie jedoch mit der Maus darauf zeigen oder mit der Tabulatortaste darauf fokussieren, erhält der Grid-Container den justify-items-Wert center, was bewirkt, dass sich die Grid-Elemente nur so weit wie ihre Inhaltsbreite erstrecken und in der Mitte ihrer Zellen ausrichten.

HTML

<article class="container" tabindex="0">
  <span>First child</span>
  <span>Second child</span>
  <span>Third child</span>
  <span>Fourth child</span>
</article>

CSS

html {
  font-family: "Helvetica", "Arial", sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
  justify-items: stretch;
}

article:hover,
article:focus {
  justify-items: center;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• justify-self
• align-items
• place-items Shorthand
• Box-Ausrichtung in Grid-Layouts
• CSS-Box-Ausrichtung Modul