<self-position>
Der <self-position>
auflistbare Wertdatentyp wird von den Eigenschaften justify-self
und align-self
sowie der Kurzform place-self
verwendet, um das Kästchen innerhalb seines Ausrichtungskontainers auszurichten. Er wird auch von den Eigenschaften justify-items
und align-items
sowie der Kurzform place-items
verwendet, um Standardwerte für justify-self
und align-self
festzulegen.
Syntax
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
Werte
Die folgenden Schlüsselwortwerte werden durch den <self-position>
Grammatikbegriff dargestellt:
center
-
Zentriert das Ausrichtungsobjekt innerhalb seines Ausrichtungskontainers.
start
-
Richtet das Ausrichtungsobjekt bündig mit der Startkante des Ausrichtungskontainers aus.
end
-
Richtet das Ausrichtungsobjekt bündig mit der Endkante des Ausrichtungskontainers aus.
self-start
-
Richtet das Ausrichtungsobjekt bündig mit der Kante des Ausrichtungskontainers aus, die der Startseite des Ausrichtungsobjekts entspricht.
self-end
-
Richtet das Ausrichtungsobjekt bündig mit der Kante des Ausrichtungskontainers aus, die der Endseite des Ausrichtungsobjekts entspricht.
flex-start
-
Im Flexlayout wird das Ausrichtungsobjekt bündig mit der Kante des Ausrichtungskontainers ausgerichtet, die der Hauptstart- oder Querstartseite des Flexcontainers entspricht, je nachdem. Es ist identisch mit
start
für andere Layoutmodi als das Flexlayout. flex-end
-
Im Flexlayout wird das Ausrichtungsobjekt bündig mit der Kante des Ausrichtungskontainers ausgerichtet, die der Hauptend- oder Querendseite des Flexcontainers entspricht, je nachdem. Identisch mit
end
für andere Layoutmodi als das Flexlayout.
Hinweis:
Die Schlüsselwörter left
und right
sind von <self-position>
ausgeschlossen, obwohl sie gültige Positionsausrichtungswerte für die justify-*
Eigenschaften (justify-content
, justify-self
, und justify-items
) sind, da sie in den align-*
Eigenschaften (align-content
, align-self
, und align-items
) nicht erlaubt sind. Stattdessen sind sie ausdrücklich in den Grammatiken der justify-*
Eigenschaften enthalten.
Spezifikationen
Specification |
---|
CSS Box Alignment Module Level 3 # typedef-self-position |
Siehe auch
- Eigenschaften, die diesen Datentyp verwenden:
align-self
,justify-self
,place-self
,align-items
,justify-items
,place-items
- Andere Box-Ausrichtungsdatentypen:
<baseline-position>
,<content-distribution>
,<overflow-position>
, und<content-position>
- CSS Box-Ausrichtung Modul
- CSS Flexibles Box-Layout Modul
- CSS Raster-Layout Modul