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 eines Grid- oder Flex-Items. Im Grid richtet sie das Item innerhalb des Grid-Bereichs aus. Im Flexbox wird das Item auf der Querachse ausgerichtet.

Probieren Sie es aus

Die Eigenschaft gilt nicht für Boxen auf Block-Niveau oder für Tabellenzellen. Wenn der Quermargin eines Flexbox-Items 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 auf den Wert des übergeordneten Elements von align-items berechnet.

normal

Die Wirkung dieses Schlüsselwortes hängt vom Layoutmodus ab, in dem wir uns befinden:

  • 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 absoluter Layouts verhält sich das Schlüsselwort wie stretch.
  • Bei Flex-Items verhält sich das Schlüsselwort wie stretch.
  • Bei Grid-Items führt dieses Schlüsselwort zu einem Verhalten ähnlich wie stretch, außer bei Boxen mit einem Seitenverhältnis oder einer intrinsischen Größe, bei der es sich wie start verhält.
  • Die Eigenschaft gilt nicht für Boxen auf Block-Niveau und für Tabellenzellen.
self-start

Richtet die Items bündig mit dem Rand des Ausrichtungscontainers aus, der der Anfangsseite des Items auf der Querachse entspricht.

self-end

Richtet die Items bündig mit dem Rand des Ausrichtungscontainers aus, der der Endseite des Items auf der Querachse entspricht.

flex-start

Der Cross-Start-Margin-Rand des Flex-Items ist bündig mit dem Cross-Start-Rand der Linie.

flex-end

Der Cross-End-Margin-Rand des Flex-Items ist bündig mit dem Cross-End-Rand der Linie.

center

Die Margin-Box des Flex-Items ist auf der Querachse innerhalb der Linie zentriert. Wenn die Querschnittsgröße des Items größer ist als der Flex-Container, wird es in beide Richtungen gleichmäßig überstanden.

baseline, first baseline, last baseline

Bestimmt die Teilnahme an der Ausrichtung der ersten oder letzten Baseline: richtet die Ausrichtungs-Baseline des ersten oder letzten Baseline-Sets der Box am entsprechenden Baseline-Set in der gemeinsamen ersten oder letzten Baseline-Gruppe aller Boxen in seiner Baseline-Teilungsgruppe aus. Das Fallback-Alignment für first baseline ist start, das für last baseline ist end.

stretch

Wenn die kombinierte Größe der Items entlang der Querachse kleiner ist als die Größe des Ausrichtungscontainers und das Item auto-groß ist, wird seine Größe gleichmäßig (nicht proportional) erhöht, während weiterhin die durch max-height/max-width (oder vergleichbare Funktionalität) auferlegten Beschränkungen beachtet werden, sodass die kombinierte Größe aller auto-großen Items den Ausrichtungscontainer entlang der Querachse genau füllt.

anchor-center

Im Fall von ankerpositionierten Elementen richtet das Item in Blockrichtung auf die Mitte des zugeordneten Ankerelements aus. Siehe Zentrieren am Anker mit anchor-center.

safe

Wenn die Größe des Items den Ausrichtungscontainer übersteigt, wird das Item stattdessen so ausgerichtet, als ob der Ausrichtungsmodus start wäre.

unsafe

Unabhängig von den relativen Größen des Items 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