place-self

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• align-self
• justify-self

auto

Berechnet sich zum align-items-Wert des Elternteils.

normal

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

• In absolut positionierten Layouts verhält sich das Schlüsselwort wie start auf ersetzten absolut positionierten Boxen und wie stretch auf allen anderen absolut positionierten Boxen.
• In 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 Grid-Elemente führt dieses Schlüsselwort zu einem ähnlichen Verhalten wie stretch, außer bei Boxen mit einem Seitenverhältnis oder intrinsischen Größen, wo es sich wie start verhält.
• Die Eigenschaft gilt nicht für Block-Level-Boxen und Tabellenelemente.

self-start

Richtet die Elemente bündig mit dem Rand des Ausrichtungscontainers aus, der der Startseite des Elements in der Kreuzachse entspricht.

self-end

Richtet die Elemente bündig mit dem Rand des Ausrichtungscontainers aus, der der Endseite des Elements in der Kreuzachse entspricht.

flex-start

Der Start-Margenrand des Flex-Elements liegt bündig mit dem Start-Rand der Linie in der Kreuzachse.

flex-end

Der End-Margenrand des Flex-Elements liegt bündig mit dem End-Rand der Linie in der Kreuzachse.

center

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

baseline, first baseline, last baseline

Gibt die Teilnahme an der Ausrichtung auf der ersten oder letzten Basislinie an: richtet die Ausrichtungsbasislinie des ersten oder letzten Basisliniensatzes der Box mit der entsprechenden Basislinie im gemeinsamen ersten oder letzten Basisliniensatz aller Boxen in seiner Basislinien-Gruppenbeteiligung aus. Die Ersatz-Ausrichtung für first baseline ist start, die für last baseline ist end.

stretch

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

anchor-center

Im Fall von anker-positionierten Elementen richtet das Element auf die Mitte des zugehörigen Ankerelements in Block- und Inline-Richtung aus. Siehe Zentrierung beim Anker mit anchor-center.

place-self = 
  <'align-self'> <'justify-self'>?  

<align-self> = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center                         

<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    

Im folgenden Beispiel haben wir ein einfaches 2 x 2 Grid-Layout. Zu Beginn hat der Grid-Container Werte von justify-items und align-items mit stretch — den Standardwerten —, was dazu führt, dass die Grid-Elemente sich über die gesamte Breite ihrer Zellen strecken.

Die zweiten, dritten und vierten Grid-Elemente erhalten dann unterschiedliche Werte von place-self, um zu zeigen, wie diese die Standardplatzierungen überschreiben. Diese Werte bewirken, dass die Grid-Elemente nur so breit/hoch wie ihre Inhaltsbreite/-höhe spannen und sich in verschiedenen Positionen innerhalb ihrer Zellen in Block- und Inline-Richtung ausrichten.

HTML

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</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: 80px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
}

span:nth-child(2) {
  place-self: start center;
}

span:nth-child(3) {
  place-self: center start;
}

span:nth-child(4) {
  place-self: end;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

Ergebnis

• align-self
• justify-self
• Grundlegende Konzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Box-Ausrichtung in CSS-Grid-Layouts
• CSS Box-Ausrichtungsmodul