align-self
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
* Some parts of this feature may have varying levels of support.
Die align-self
CSS-Eigenschaft überschreibt den Wert von align-items
für ein Gitter- oder Flex-Element. Im Gitter richtet sie das Element innerhalb des Gitterbereichs aus. In Flexbox richtet sie das Element entlang der Querachse aus.
Probieren Sie es aus
Diese Eigenschaft gilt nicht für Block-Level-Boxen oder für Tabellenzellen. Wenn der Querachsenabstand eines Flexbox-Elements auto
ist, wird align-self
ignoriert.
Syntax
/* Keyword values */
align-self: auto;
align-self: normal;
/* Positional alignment */
/* align-self does not take left and right values */
align-self: center; /* Put the item around the center */
align-self: start; /* Put the item at the start */
align-self: end; /* Put the item at the end */
align-self: self-start; /* Align the item flush at the start */
align-self: self-end; /* Align the item flush at the end */
align-self: flex-start; /* Put the flex item at the start */
align-self: flex-end; /* Put the flex item at the end */
align-self: anchor-center;
/* Baseline alignment */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /* Stretch 'auto'-sized items to fit the container */
/* Overflow alignment */
align-self: safe center;
align-self: unsafe center;
/* Global values */
align-self: inherit;
align-self: initial;
align-self: revert;
align-self: revert-layer;
align-self: unset;
Werte
auto
-
Berechnet zum Wert von
align-items
des übergeordneten Elements. normal
-
Die Wirkung dieses Schlüsselworts hängt vom verwendeten Layoutmodus ab:
- 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. - Bei der statischen Position von absolut positionierten Layouts verhält sich das Schlüsselwort wie
stretch
. - Für Flex-Elemente verhält sich das Schlüsselwort wie
stretch
. - Für Gitter-Elemente führt dieses Schlüsselwort zu einem Verhalten, das dem von
stretch
ähnelt, außer bei Boxen mit einem Seitenverhältnis oder einer intrinsischen Größe, wo es sich wiestart
verhält. - Diese Eigenschaft gilt nicht für Block-Level-Boxen oder Tabellenzellen.
- In absolut positionierten Layouts verhält sich das Schlüsselwort wie
self-start
-
Richtet die Elemente bündig mit der Kante des Ausrichtungscontainers aus, die der Startseite des Elements auf der Querachse entspricht.
self-end
-
Richtet die Elemente bündig mit der Kante des Ausrichtungscontainers aus, die der Endseite des Elements auf der Querachse entspricht.
flex-start
-
Die Querstartabstandskante des Flex-Elements wird mit der Querstartkante der Linie bündig ausgerichtet.
flex-end
-
Die Querendabstandskante des Flex-Elements wird mit der Querendkante der Linie bündig ausgerichtet.
center
-
Die Abstandskante des Flex-Elements wird innerhalb der Linie auf der Querachse zentriert. Wenn die Querausdehnung des Elements größer als der Flex-Container ist, wird es gleichmäßig in beide Richtungen überlaufen.
baseline
,first baseline
,last baseline
-
Gibt die Teilnahme an der Ausrichtung der ersten oder letzten Grundlinie an: richtet die Ausrichtungsgrundlinie des ersten oder letzten Grundliniensatzes der Box mit der entsprechenden Grundlinie im gemeinsamen ersten oder letzten Grundliniensatz aller Boxen in ihrer Grundlinienfreigabegruppe aus. Das Fallback der Ausrichtung für
first baseline
iststart
, fürlast baseline
ist esend
. stretch
-
Wenn die kombinierte Größe der Elemente entlang der Querachse kleiner ist als die Größe des Ausrichtungscontainers und das Element
auto
-groß bemessen ist, wird seine Größe gleichmäßig (nicht proportional) erhöht, wobei die Einschränkungen, die durchmax-height
/max-width
(oder gleichwertige Funktionalität) auferlegt werden, weiterhin respektiert werden, sodass die kombinierte Größe allerauto
-großen Elemente die Ausrichtungscontainergröße entlang der Querachse genau ausfüllt. anchor-center
-
Bei ankerpositionierten Elementen richtet sich das Element im Blockverlauf auf die Mitte des zugehörigen Ankerelements aus. Siehe Zentrieren auf dem Anker mit
anchor-center
. safe
-
Wenn die Größe des Elements den Ausrichtungscontainer überschreitet, wird das Element stattdessen so ausgerichtet, als ob der Ausrichtungsmodus
start
wäre. unsafe
-
Unabhängig von den relativen Größen von Element und Ausrichtungscontainer wird der angegebene Ausrichtungswert beachtet.
Formale Definition
Anfangswert | auto |
---|---|
Anwendbar auf | flex items, grid items, and absolutely-positioned boxes |
Vererbt | Nein |
Berechneter Wert | auto berechnet sich zu sich selbst bei absolut positionierten Elementen und zum berechneten Wert von align-items des Elternelements (abzüglich veralteter Schlüsselwörter) bei allen anderen Boxen oder start , falls die Box kein Elternelement hat. Sein Verhalten hängt vom Layoutmodell ab, wie für justify-self beschrieben. Ansonsten der angegebene Wert. |
Animationstyp | diskret |
Formale Syntax
Beispiele
HTML
<section>
<div>Item #1</div>
<div>Item #2</div>
<div>Item #3</div>
</section>
CSS
section {
display: flex;
align-items: center;
height: 120px;
background: beige;
}
div {
height: 60px;
background: cyan;
margin: 5px;
}
div:nth-child(3) {
align-self: flex-end;
background: pink;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Box Alignment Module Level 3 # align-self-property |
CSS Flexible Box Layout Module Level 1 # align-items-property |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
align-self | ||||||||||||
anchor-center | ||||||||||||
Supported in Flex Layout | ||||||||||||
flex_context.baseline | ||||||||||||
first baseline | ||||||||||||
last baseline | ||||||||||||
safe and unsafe | ||||||||||||
start and end | ||||||||||||
flex_context.stretch | ||||||||||||
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
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.