align-self

Probieren Sie es aus

align-self: stretch;

align-self: center;

align-self: start;

align-self: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 200px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

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 sich auf den align-items Wert des übergeordneten Elements.

normal

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

• In absolut positionierten Layouts verhält sich das Schlüsselwort wie start bei ersetzen 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.
• Für Flex-Items verhält sich das Schlüsselwort wie stretch.
• Für Grid-Items 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, 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 auf der Startseite des Elements in der Querachse liegt.

self-end

Richtet die Elemente bündig mit der Kante des Ausrichtungscontainers aus, die auf der Endseite des Elements in der Querachse liegt.

flex-start

Der Querstart-Rand der Flex-Items wird mit der Querstart-Kante der Linie bündig gemacht.

flex-end

Der Querend-Rand der Flex-Items wird mit der Querend-Kante der Linie bündig gemacht.

center

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

baseline, first baseline, last baseline

Gibt die Teilnahme an der Ausrichtung der ersten oder letzten Basislinie an: richtet die Ausrichtungsbasislinie der ersten oder letzten Basisliniensammlung der Box mit der entsprechenden Basislinie in der geteilten ersten oder letzten Basisliniensammlung aller Boxen in ihrer Basisliniensharing-Gruppe aus. Die Ersatz-Ausrichtung für first baseline ist start, die für last baseline ist end.

stretch

Wenn die Quergöße des Elements auto ist, wird die verwendete Größe auf die Länge gesetzt, die notwendig ist, um den Container so nah wie möglich auszufüllen, unter Berücksichtigung der Breiten- und Höhenbegrenzungen des Elements. Wenn das Element nicht automatisch skaliert wird, fällt dieser Wert auf flex-start zurück und auf self-start oder self-end, wenn das align-content des Containers first baseline (oder baseline) oder last baseline ist.

anchor-center

Im Fall von ankerpositionierten Elementen richtet das Element im Blockmodus in der Mitte des zugehörigen Ankerelements aus. Siehe Zentrierung auf dem 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

Ungeachtet der relativen Größen des Elements und des Ausrichtungscontainers wird der gegebene Ausrichtungswert beachtet.

Formale Definition

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

<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

Browser-Kompatibilität

Siehe auch

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Box-Alignment im Grid-Layout
• CSS Box-Ausrichtung
• align-items
• justify-self
• place-self