place-self

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

• align-self
• justify-self

auto

Ermittelt sich zum Wert der align-items Eigenschaft des übergeordneten Elements.

normal

Die Wirkung dieses Schlüsselworts hängt vom Layout-Modus 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.
• Im statischen Zustand 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 Verhalten ähnlich dem von stretch, außer für 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 so aus, dass sie bündig mit dem Rand des Ausrichtungscontainers sind, der der Startseite des Elements in der Kreuzachse entspricht.

self-end

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

flex-start

Der Anfangsrand der Flex-Elemente wird mit dem Anfangsrand der Linie bündig ausgerichtet.

flex-end

Der Endrand der Flex-Elemente wird mit dem Endrand der Linie bündig ausgerichtet.

center

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

baseline, first baseline, last baseline

Bestimmt die Teilnahme an der Ausrichtung der ersten oder letzten Grundlinie: richtet die Grundlinie des Ausrichtungsbereichs der Box mit der entsprechenden Grundlinie der geteilten ersten oder letzten Grundliniensammlung aller Boxen in ihrer Grundliniengruppe aus. Die standardmäßige Ausrichtung für first baseline ist start, für last baseline ist es end.

stretch

Wenn die kombinierte Größe der Elemente entlang der Kreuzachse kleiner ist als die Größe des Ausrichtungscontainers und das Element auto-größenbasiert ist, wird seine Größe gleichmäßig (nicht proportional) erhöht, unter Wahrung der durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Beschränkungen, so dass die kombinierte Größe aller auto-größenbasierten Elemente den Ausrichtungscontainer entlang der Kreuzachse genau füllt.

anchor-center

Bei Anker-positionierten Elementen richtet das Element so aus, dass es in der Block- und Inline-Richtung im Zentrum des zugehörigen Ankerelements liegt. Siehe Zentrieren am 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. Zunächst hat der Grid-Container die justify-items und align-items Werte stretch — die Standardwerte —, was bewirkt, dass die Grid-Elemente sich über die gesamte Breite ihrer Zellen erstrecken.

Die zweiten, dritten und vierten Grid-Elemente erhalten dann unterschiedliche place-self Werte, um zu zeigen, wie diese die Standardplatzierungen überschreiben. Diese Werte bewirken, dass die Grid-Elemente nur so breit/hoch wie ihre Inhaltsbreite/-höhe sind und sich in verschiedenen Positionen innerhalb ihrer Zellen, in Block- und Inline-Richtungen, 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
• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Box-Ausrichtung in CSS Grid-Layouts
• CSS Box-Ausrichtungsmodul