Artikel rechtfertigen - CSS-Tricks

Anonim

Die justify-itemsEigenschaft ist eine Untereigenschaft des CSS-Box-Ausrichtungsmoduls, das im Wesentlichen die Ausrichtung von Rasterelementen innerhalb ihres Bereichs steuert.

.element ( justify-items: center; )

justify-itemsRichtet Rasterelemente entlang der Zeilenachse (Inline) aus. Insbesondere erlaubt diese Eigenschaft Sie einstellen Ausrichtung für Elemente in einem Gitterbehälter (nicht das Gitter selbst) in einer bestimmten Position (beispielsweise start, centerund end) oder mit einem Verhalten ( zum Beispiel autooder stretch).

Bei justify-itemsVerwendung wird auch der Standardwert justify-selffür alle Rasterelemente festgelegt. Dies kann jedoch auf untergeordneter Ebene überschrieben werden, indem die justify-selfEigenschaft für das untergeordnete Element selbst verwendet wird.

.grid ( display: grid; justify-items: center; ) .grid-item ( justify-self: start; )

Syntax

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Ursprünglicher Wert: legacy
  • Gilt für: alle Elemente
  • Geerbt: 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 so aus, dass sie die gesamte Breite der Rasterelementzelle ausfüllen
  • auto: wie Wert von justify-itemsin parent.
  • normal: Während es justify-itemsin einem Rasterlayout am häufigsten verwendet wird, ist es technisch für jede Boxausrichtung geeignet und normalbedeutet verschiedene Dinge in unterschiedlichen Layoutkontexten, einschließlich:
    • Layouts auf Blockebene ( start)
    • Rasterlayouts stretch
    • Flexbox (ignoriert)
    • Tabellenzellen (ignoriert)
    • absolut positionierte Layouts ( start)
    • absolut positionierte Boxen ( stretch)
    • absolut positionierte Boxen ersetzt ( start)
.container ( justify-items: stretch; )

Grundlinienausrichtungswerte

Dadurch wird die Ausrichtungsgrundlinie des ersten oder letzten Grundliniensatzes der Box an der entsprechenden Grundlinie des Ausrichtungskontexts ausgerichtet.

.container ( justify-items: baseline; )
  • Die Fallback-Ausrichtung für first baselineist safe start.
  • Die Fallback-Ausrichtung für last baselineist safe end.
  • baselineentspricht first baselinebei alleiniger Verwendung

In der folgenden Demo (am besten in Firefox zu sehen) sehen wir, wie Elemente an der Grundlinie eines Rasters entlang der Hauptachse ausgerichtet werden.

Positionsausrichtungswerte

  • start: Richtet Elemente an der Startkante des Ausrichtungscontainers aus
  • end: Richtet Elemente am Endkantenausrichtungscontainer aus
  • center: Richtet Elemente in der Mitte des Ausrichtungscontainers aus
  • left: Richtet Elemente links vom Ausrichtungscontainer aus
  • right: Richtet Elemente rechts vom Ausrichtungscontainer aus
  • self-start: Richtet Elemente am Anfang jeder Rasterelementzelle aus
  • self-end: Richtet Elemente am Ende jeder Rasterelementzelle aus
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Überlaufausrichtungswerte

Die Überlaufeigenschaft bestimmt, wie der Inhalt des Rasters angezeigt wird, wenn der Inhalt die Grenzwerte des Rasters überschreitet. Wenn der Inhalt also größer als der Ausrichtungscontainer ist, führt dies zu einem Überlauf, der zu Datenverlust führen kann. Um dies zu verhindern, können wir den safeWert verwenden, der den Browser anweist, die Ausrichtung so zu ändern, dass kein Datenverlust auftritt.

  • safe : Wenn ein Element den Ausrichtungscontainer überläuft, wird der startModus verwendet.
  • unsafe : Der Ausrichtungswert bleibt unverändert, unabhängig von der Artikelgröße oder dem Ausrichtungsbehälter.

Legacy-Werte

  • legacy : Wenn es mit einem Richtungs Schlüsselwort (zB verwendet right, leftoder center), das Schlüsselwort zu Nachkommen zu vererben übergeben wird. Aber wenn der Nachkomme erklärt justify-self: auto;dann legacyignoriert wird , aber immer noch respektiert das Richtungs Schlüsselwort. Der Wert wird zum geerbten Wert berechnet, wenn kein Richtungsschlüsselwort angegeben ist. Andernfalls wird es berechnet normal.

Demo

Mehr Informationen

  • CSS Box Alignment Module Level 3 (Arbeitsentwurf)
  • Eine vollständige Anleitung zum Raster
  • Eine vollständige Anleitung zu Flexbox

Browser-Unterstützung

Die justify-itemsBrowserunterstützung führt den Farbumfang aus, da er in mehreren Layoutkontexten wie Grid, Flexbox und Tabellenzellen verwendet wird. Wenn jedoch Grid und Flexbox unterstützt werden, können Sie davon ausgehen, dass dies auch der Fall justify-itemsist.

Gitterstruktur

IE Kante Feuerfuchs Chrom Safari Oper
Nein 16+ 45+ 57+ 10.1+ 44+
Android Chrome Android Firefox Android Browser iOS Safari Opera Mobile
81+ 45+ 81+ 10.1+ 59+
Quelle: caniuse

Flex Layout

IE Kante Feuerfuchs Chrom Safari Oper
Nein 12+ 20+ 52+ 9+ 12.1+
Android Chrome Android Firefox Android Browser iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12.1+
Quelle: caniuse

Verwandte Eigenschaften

Almanach am 27. Oktober 2019

Elemente ausrichten

Geoff Graham