justify-items | CSS-Tricks

CSS Almanac → Properties → J → justify-items

Mohit Khare am 2. März 2021

Die Eigenschaft justify-items ist eine Untereigenschaft des CSS Box Alignment Module, die im Grunde die Ausrichtung von Grid-Items innerhalb ihres Gültigkeitsbereichs steuert.

.element {
  justify-items: center;
}

justify-items richtet Grid-Items entlang der Zeilenachse (inline) aus. Speziell ermöglicht diese Eigenschaft die Festlegung der Ausrichtung von Elementen innerhalb eines Grid-Containers (nicht des Grids selbst) an einer bestimmten Position (z. B. start, center und end) oder mit einem Verhalten (z. B. auto oder stretch).

Wenn justify-items verwendet wird, wird auch der Standardwert für justify-self für alle Grid-Items gesetzt, obwohl dies auf Kinderebene durch die Verwendung der Eigenschaft justify-self auf dem Kind selbst überschrieben werden kann.

.grid {
  display: grid;
  justify-items: center;
}

.grid-item {
  justify-self: start;
}

Syntax

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

Anfangswert: legacy
Gilt für: alle Elemente
Vererbt: nein
Berechneter Wert: wie angegeben
Animationstyp: diskret

Werte

/* Basic keyword values */
justify-items: auto;
justify-items: normal;
justify-items: stretch;

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

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

/* Overflow alignment */
/* Used as an optional second value for positional alignment */
justify-items: safe;
justify-items: unsafe;

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

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

Grundlegende Schlüsselwortwerte

stretch: Standardwert. Richtet Elemente aus, um die gesamte Breite der Grid-Item-Zelle auszufüllen.
auto: Gleicht dem Wert von justify-items im Elternteil.
normal: Während justify-items am häufigsten in einem Grid-Layout verwendet wird, ist es technisch für jede Box-Ausrichtung und normal bedeutet unterschiedliche Dinge in verschiedenen Layout-Kontexten, einschließlich:
- Block-Level-Layouts (start)
- Grid-Layouts stretch
- Flexbox (ignoriert)
- Tabellenzellen (ignoriert)
- Absolut positionierte Layouts (start)
- Absolut positionierte Boxen (stretch)
- Ersetzte absolut positionierte Boxen (start)

.container {
  justify-items: stretch;
}

Baseline-Ausrichtungswerte

Dies richtet die Ausrichtungsbasis der ersten oder letzten Basislinie der Box mit der entsprechenden Basislinie ihres Ausrichtungskontextes aus.

.container {
  justify-items: <first | last> baseline;
}

Die Fallback-Ausrichtung für first baseline ist safe start.
Die Fallback-Ausrichtung für last baseline ist safe end.
baseline entspricht first baseline, wenn es allein verwendet wird.

In der untenstehenden Demo (am besten in Firefox anzusehen) sehen wir, wie Elemente mit der Basislinie eines Grids entlang der Hauptachse ausgerichtet werden.

Positionsausrichtungswerte

start: Richtet Elemente am Anfangsrand des Ausrichtungskontextes aus.
end: Richtet Elemente am Ende des Ausrichtungskontextes aus.
center: Richtet Elemente in der Mitte des Ausrichtungskontextes aus.
left: Richtet Elemente links im Ausrichtungskontext aus.
right: Richtet Elemente rechts im Ausrichtungskontext aus.
self-start: Richtet Elemente am Anfang jeder Grid-Item-Zelle aus.
self-end: Richtet Elemente am Ende jeder Grid-Item-Zelle aus.

.container {
  justify-items: <start | left | self-start>
}

.container {
  justify-items: <end | right | self-end>
}

.container {
  justify-items: center;
}

Overflow-Ausrichtungswerte

Die Eigenschaft overflow bestimmt, wie die Inhalte des Grids angezeigt werden, wenn der Inhalt die Grenzen des Grids überschreitet. Wenn also die Inhalte größer sind als der Ausrichtungskontext, führt dies zu einem Overflow, was zu Datenverlust führen kann. Um dies zu verhindern, können wir den Wert safe verwenden, der dem Browser mitteilt, die Ausrichtung so zu ändern, dass kein Datenverlust auftritt.

safe <left | right | center>: Wenn ein Element den Ausrichtungskontext überläuft, wird der Modus start verwendet.
unsafe <left | right | center>: Der Ausrichtungswert bleibt unverändert, unabhängig von der Elementgröße oder dem Ausrichtungskontext.

Legacy-Werte

legacy <right | left | center>: Wenn es mit einem Richtungs-Schlüsselwort (z. B. right, left oder center) verwendet wird, wird dieses Schlüsselwort an die Nachkommen zur Vererbung weitergegeben. Wenn jedoch ein Nachkomme justify-self: auto; deklariert, wird legacy ignoriert, respektiert aber dennoch das Richtungs-Schlüsselwort. Der Wert wird zum vererbten Wert, wenn kein Richtungs-Schlüsselwort angegeben wird. Andernfalls wird er zu normal.

Demo

Weitere Informationen

CSS Box Alignment Module Level 3 (Arbeitsentwurf)
Ein vollständiger Leitfaden zu Grid
Ein vollständiger Leitfaden zu Flexbox

Browser-Unterstützung

Browser-Unterstützung für justify-items ist ziemlich breit gefächert, da es in mehreren Layout-Kontexten wie Grid, Flexbox und Tabellenzellen verwendet wird. Aber im Allgemeinen gilt: Wenn Grid und Flexbox unterstützt werden, kann man davon ausgehen, dass justify-items ebenfalls unterstützt wird.