justify-self

Die justify-self CSS-Eigenschaft legt die Ausrichtung eines Elements innerhalb seines Container-Blocks fest. Sein Verhalten hängt von der display-Eigenschaft des Container-Blocks ab. Wenn der Container-Block beispielsweise ein Grid-Container ist (d.h. display: grid), können wir das Element darin entlang der "Inline"-Achse ausrichten (die wiederum je nach Content direction vertikal oder horizontal sein kann).

.element {
  justify-self: start;
}

justify-self ist in der CSS Box Alignment Module Level 3 Spezifikation definiert.

Lassen Sie uns über die Richtung sprechen

Richtung ist in CSS eine relative Angelegenheit. Sie sind vielleicht daran gewöhnt, über Richtung in Bezug auf Abstände nachzudenken, wie top, bottom, left und right. Aber nicht alle Sprachen denken in derselben von links nach rechts (LTR) Ausrichtung. Deshalb lehnt sich CSS stark in die *Richtung* (Wortspiel beabsichtigt) der **logischen Eigenschaften**.

Logische Eigenschaften in CSS berücksichtigen die direction, text-orientation und writing-mode des Inhalts und behandeln die Inline- und Blockrichtungen entsprechend. In einem LTR-Schreibmodus bedeutet Inline also links und rechts, und Block bedeutet oben und unten. In einem vertikalen Schreibmodus bedeutet Inline oben und unten, und Block bedeutet links und rechts. Das ist die "Logik" in logischen Eigenschaften, wie margin-inline und margin-block unter vielen anderen Eigenschaften.

Was hat das mit justify-self zu tun? Nun, es verwendet Schlüsselwortwerte – wie start und end –, die in verschiedenen Kontexten unterschiedliche Bedeutungen haben. justify-self richtet ein Element entlang der *Inline*-Achse aus, die in einem LTR-Schreibmodus horizontal ist, ansonsten aber vertikal.

Syntax

justify-self: auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]

Werte

/* Basic keywords */
justify-self: auto;
justify-self: normal;
justify-self: stretch;

/* Postion keywords */
justify-self: start;
justify-self: end;
justify-self: center;
justify-self: left;
justify-self: right;
justify-self: flex-start;
justify-self: flex-end;
justify-self: self-start;
justify-self: self-end;

/* Baseline keywords */
justify-self: baseline;
justify-self: first-baseline;
justify-self: last-baseline;

/* Overflow keywords */
justify-self: safe center;
justify-self: unsafe center;

/* Global keywords */
justify-self: inherit;
justify-self: initial;
justify-self: unset;

Grundlegende Schlüsselwortwerte

• auto: Der Standardwert. Er verhält sich wie der normal-Wert, wenn das Element nicht innerhalb eines Elternelements enthalten ist und wenn das Element sich innerhalb eines absolut positionierten Elternelements befindet (d.h. position: absolute). Andernfalls erbt es den justify-items-Wert des Elternelements, wie es der Fall ist, wenn sich das Element in einem Grid-Container befindet.
• normal: Nimmt die Standardausrichtung der Box, die das Element enthält. Dies kann sich also auf verschiedene Weise verhalten, abhängig vom Layout-Modus des enthaltenden Elements, ob es sich um ein normales Block-Layout oder etwas anderes handelt, wie z.B. einen Grid-Container.
  • Block-Level-Layouts (start)
  • Grid-Layouts stretch
  • Flexbox (ignoriert)
  • Tabellenzellen (ignoriert)
  • Absolut positionierte Layouts (start)
  • Absolut positionierte Boxen (stretch)
  • Ersetzte absolut positionierte Boxen (start)
• stretch: Dies zwingt das Element, so viel Platz wie möglich im enthaltenden Element einzunehmen, wobei natürlich andere Elemente im Container berücksichtigt werden. Wie stark dehnt es sich aus? Das hängt von der berechneten width und height des Elements selbst ab, die auf auto gesetzt sein müssen, damit dieser Wert wirksam wird. Und aufgepasst: Wenn ein Rand entlang der Ausrichtungsachse auf auto gesetzt ist, erfolgt keine Dehnung.

.element {
  justify-self: stretch;
}

Positions-Schlüsselwortwerte

• start: Das Element wird am Anfangsrand des Containers "gepackt". Mit "gepackt" meinen wir, dass der Anfangsrand des Elements mit dem Anfangsrand des Containers ausgerichtet wird und das Element sich nicht ausdehnt, um den Rest des verfügbaren Platzes auszufüllen.
• end: Das Element wird am Ende des Containers "gepackt".
• center: Das Element wird in der Mitte der Ausrichtungsachse "gepackt".
• left: Das Element wird am linken Rand des Containers "gepackt". Wenn die Ausrichtungsachse Inline ist, ist dies praktisch dasselbe wie start.
• right: Das Element wird am rechten Rand des Containers "gepackt". Wenn die Ausrichtungsachse Inline ist, ist dies praktisch dasselbe wie end.
• flex-start: Wenn das Element kein Flex-Item in einem flexiblen Container ist (d.h. ein Container, der nicht auf display: flex gesetzt ist), verhält sich dieser Wert wie start.
• flex-end: Wenn das Element kein Flex-Item in einem flexiblen Container ist, verhält sich dieser Wert wie end.
• self-start: Das Element wird entlang seines eigenen Anfangsrandes "gepackt", was von seiner Richtung abhängt.
• self-end: Das Element wird entlang seines eigenen Endrands "gepackt", was von seiner Richtung abhängt.

.element {
  justify-self: start;
}

.element {
  justify-self: end;
}

.element {
  justify-self: center;
}

Baseline-Schlüsselwortwerte

Diese richten die erste oder letzte Grundlinie des Elements mit der entsprechenden Grundlinie seines Ausrichtungskontexts aus.

.element {
  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.

Overflow-Schlüsselwortwerte

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

• safe: Das Element verhält sich so, als ob der Ausrichtungsmodus start wäre, wenn es den enthaltenden Container überläuft.
• unsafe: Der Ausrichtungswert des Elements wird unabhängig von der Größe des enthaltenden Elements berücksichtigt, was es dem Element ermöglicht, den enthaltenden Container zu überlaufen, wenn seine Größe den verfügbaren Platz überschreitet.

Demo

Weitere Informationen

Verwandte Eigenschaften