justify-self
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
* Some parts of this feature may have varying levels of support.
Die CSS-Eigenschaft justify-self
legt fest, wie ein Element innerhalb seines Ausrichtungscontainers entlang der entsprechenden Achse ausgerichtet wird.
Probieren Sie es aus
Die Wirkung dieser Eigenschaft hängt vom Layoutmodus ab:
- In blockbasierten Layouts richtet sie ein Element auf der Inline-Achse innerhalb seines enthaltenden Blocks aus.
- Für absolut positionierte Elemente richtet sie ein Element auf der Inline-Achse innerhalb seines enthaltenden Blocks aus, wobei die Versatzwerte von top, left, bottom und right berücksichtigt werden.
- In Tabellenzellen-Layouts wird diese Eigenschaft ignoriert. Lesen Sie mehr über das Ausrichten in blockbasierten, absolut positionierten und Tabellen-Layouts.
- In Flexbox-Layouts wird diese Eigenschaft ignoriert. Lesen Sie mehr über das Ausrichten in Flexbox-Layouts.
- In Grid-Layouts richtet sie ein Element auf der Inline-Achse innerhalb seines Gitterbereichs aus. Lesen Sie mehr über das Ausrichten in Grid-Layouts.
Syntax
/* Basic keywords */
justify-self: auto;
justify-self: normal;
justify-self: stretch;
/* Positional alignment */
justify-self: center; /* Pack item around the center */
justify-self: start; /* Pack item from the start */
justify-self: end; /* Pack item from the end */
justify-self: flex-start; /* Equivalent to 'start'. Note that justify-self is ignored in flexbox layouts. */
justify-self: flex-end; /* Equivalent to 'end'. Note that justify-self is ignored in flexbox layouts. */
justify-self: self-start;
justify-self: self-end;
justify-self: left; /* Pack item from the left */
justify-self: right; /* Pack item from the right */
justify-self: anchor-center;
/* Baseline alignment */
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;
/* Overflow alignment (for positional alignment only) */
justify-self: safe center;
justify-self: unsafe center;
/* Global values */
justify-self: inherit;
justify-self: initial;
justify-self: revert;
justify-self: revert-layer;
justify-self: unset;
Diese Eigenschaft kann eine von drei verschiedenen Formen annehmen:
-
Grundlegende Schlüsselwörter: eines der Schlüsselwortwerte
normal
,auto
oderstretch
. -
Baseline-Ausrichtung: das Schlüsselwort
baseline
, optional zusammen mitfirst
oderlast
. -
Positionelle Ausrichtung:
- eines von:
center
,start
,end
,flex-start
,flex-end
,self-start
,self-end
,left
oderright
. - Optional zusätzlich
safe
oderunsafe
.
- eines von:
Werte
auto
-
Der verwendete Wert entspricht dem Wert der
justify-items
-Eigenschaft des übergeordneten Containers, es sei denn, das Element hat keinen übergeordneten Container oder ist absolut positioniert. In diesen Fällen entsprichtauto
normal
. normal
-
Die Wirkung dieses Schlüsselworts hängt vom Layoutmodus ab:
- 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 wiestretch
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 ähnlich wie bei
stretch
, außer bei Boxen mit einem Seitenverhältnis oder einer intrinsischen Größe, bei denen es sich wiestart
verhält.
- In blockbasierten Layouts ist das Schlüsselwort ein Synonym für
start
-
Das Element wird an der Startkante des Ausrichtungscontainers entlang der entsprechenden Achse ausgerichtet.
end
-
Das Element wird an der Endkante des Ausrichtungscontainers entlang der entsprechenden Achse ausgerichtet.
flex-start
-
Für Elemente, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie
start
behandelt. flex-end
-
Für Elemente, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie
end
behandelt. self-start
-
Das Element wird an der Startkante des Ausrichtungscontainers der Startseite des Elements in der entsprechenden Achse ausgerichtet.
self-end
-
Das Element wird an der Endkante des Ausrichtungscontainers der Endseite des Elements in der entsprechenden Achse ausgerichtet.
center
-
Die Elemente werden in der Mitte des Ausrichtungscontainers ausgerichtet.
left
-
Die Elemente werden an der linken Kante des Ausrichtungscontainers ausgerichtet. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie
start
. right
-
Die Elemente werden an der rechten Kante des Ausrichtungscontainers entlang der entsprechenden Achse ausgerichtet. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie
start
. baseline
,first baseline
,last baseline
-
Bestimmt die Teilnahme an der ersten oder letzten Baseline-Ausrichtung: richtet die Ausrichtungsbasislinie des Elements mit der entsprechenden Baseline in der gemeinsamen ersten oder letzten Baseline-Gruppe aller Elemente in seiner Gruppe aus. Die fallback-Ausrichtung für
first baseline
iststart
, fürlast baseline
ist sieend
. stretch
-
Wenn die kombinierte Größe der Elemente kleiner ist als die Größe des Ausrichtungscontainers, werden alle
auto
-dimensionierten Elemente gleichermaßen (nicht proportional) vergrößert, wobei weiterhin die durchmax-height
/max-width
(oder gleichwertige Funktionalitäten) auferlegten Einschränkungen berücksichtigt werden, sodass die kombinierte Größe genau den Ausrichtungscontainer füllt. anchor-center
-
Bei Anker-positionierten Elementen richtet dieser Wert das Element in der Inline-Richtung in der Mitte des zugeordneten Anker-Elements aus. Siehe Zentrierung am Anker mit
anchor-center
. safe
-
Wenn die Größe des Elements den Ausrichtungscontainer überläuft, wird das Element so ausgerichtet, als ob der Ausrichtungsmodus
start
wäre. unsafe
-
Unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers wird der gegebene Ausrichtungswert berücksichtigt.
Formale Definition
Anfangswert | auto |
---|---|
Anwendbar auf | block-level boxes, absolutely-positioned boxes, and grid items |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formaler Syntax
justify-self =
auto |
normal |
stretch |
<baseline-position> |
<overflow-position>? [ <self-position> | left | right ] |
anchor-center
<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
Im folgenden Beispiel haben wir ein einfaches 2 x 2 Gitter-Layout. Anfangs erhält der Gitter-Container den justify-items
-Wert stretch
, was der Standardwert ist. Dadurch erstrecken sich die Gitter-Elemente über die gesamte Breite ihrer Zellen.
Die zweiten, dritten und vierten Gitter-Elemente erhalten dann unterschiedliche Werte für justify-self
, um zu zeigen, wie diese den justify-items
-Wert überschreiben. Diese Werte bewirken, dass die Gitter-Elemente nur so breit wie die Breite ihres Inhalts sind und an verschiedenen Positionen in ihren Zellen ausgerichtet werden.
HTML
<article class="container">
<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;
}
span:nth-child(2) {
justify-self: start;
}
span:nth-child(3) {
justify-self: center;
}
span:nth-child(4) {
justify-self: end;
}
article span {
background-color: black;
color: white;
margin: 1px;
text-align: center;
}
article,
span {
padding: 10px;
border-radius: 7px;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Box Alignment Module Level 3 # justify-self-property |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
justify-self | ||||||||||||
anchor-center | ||||||||||||
Supported in Grid Layout | ||||||||||||
Supported for absolutely-positioned boxes |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.