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.

Die align-self CSS Eigenschaft überschreibt den Wert von align-items eines Grid- oder Flex-Elements. Im Grid richtet sie das Element innerhalb des Grid-Bereichs aus. Im Flexbox richtet sie das Element auf der Querachse aus.

Probieren Sie es aus

Die Eigenschaft gilt nicht für Block-Level-Boxen oder für Tabellenzellen. Wenn der Querachsenabstand eines Flexbox-Elements auf auto gesetzt ist, wird align-self ignoriert.

Syntax

css
/* 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

Wird zum Wert des übergeordneten align-items berechnet.

normal

Die Wirkung dieses Schlüsselworts hängt vom aktuellen Layoutmodus ab:

  • In absolut positionierten Layouts verhält sich das Schlüsselwort wie start bei ersetzten absolut positionierten Boxen und wie stretch bei allen anderen absolut positionierten Boxen.
  • In der statischen Position von absolut positionierten Layouts verhält sich das Schlüsselwort wie stretch.
  • Bei Flex-Elementen verhält sich das Schlüsselwort wie stretch.
  • Bei Grid-Elementen führt dieses Schlüsselwort zu einem Verhalten ähnlich dem von stretch, außer bei Boxen mit einem Seitenverhältnis oder intrinsischen Größen, bei denen es sich wie start verhält.
  • Die Eigenschaft gilt nicht für Block-Level-Boxen und Tabellenzellen.
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 Querstartkante des Flex-Elements ist bündig mit der Querstartkante der Linie.

flex-end

Die Querendkante des Flex-Elements ist bündig mit der Querendkante der Linie.

center

Die Randbox des Flex-Elements wird innerhalb der Linie auf der Querachse zentriert. Wenn die Querausdehnung des Elements größer als der Flex-Container ist, kommt es zu gleichmäßigem Überlaufen in beide Richtungen.

baseline, first baseline, last baseline

Spezifiziert die Teilnahme an der Erst- oder Letzt-Baseline-Ausrichtung: richtet die Ausrichtungs-Baseline der ersten oder letzten Baseline-Gruppe des Boxen-Set mit der entsprechenden Baseline in der geteilten ersten oder letzten Baseline-Gruppe aller Boxen in ihrer Baseline-Sharing-Gruppe aus. Die Reserveausrichtung für first baseline ist start, die für last baseline ist end.

stretch

Wenn die kombinierte Größe der Elemente entlang der Querachse kleiner ist als die Größe des Ausrichtungscontainers und das Element auto-sized ist, wird seine Größe gleichmäßig (nicht proportional) erhöht, während die durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Beschränkungen respektiert werden, so dass die kombinierte Größe aller auto-sized Elemente den Ausrichtungscontainer entlang der Querachse genau ausfüllt.

anchor-center

Bei Verankerungs-Positionierung von Elementen richtet das Element in der Blockrichtung in der Mitte des zugehörigen Ankerelements aus. Siehe Zentrieren am Anker mit anchor-center.

safe

Wenn die Größe des Elements den Ausrichtungscontainer überläuft, wird das Element stattdessen so ausgerichtet, als ob der Ausrichtungsmodus start wäre.

unsafe

Unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers wird der angegebene Ausrichtungswert eingehalten.

Formale Definition

Anfangswertauto
Anwendbar aufflex items, grid items, and absolutely-positioned boxes
VererbtNein
Berechneter Wertauto 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.
Animationstypdiskret

Formale Syntax

align-self = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  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

HTML

html
<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>

CSS

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

BCD tables only load in the browser

Siehe auch