place-self

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

• align-self
• justify-self

auto

Wird zum Wert des übergeordneten Elements von align-items berechnet.

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.
• In der statischen Position absolut positionierter 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 für 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 Tabellenspalten.

self-start

Richtet die Elemente so aus, dass sie bündig mit dem Rand des Ausrichtungscontainers sind, der der Startseite des Elements auf 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 auf der Kreuzachse entspricht.

flex-start

Der Rand der Flexseite an der Startseite ist bündig mit der Startkante der Linie.

flex-end

Der Rand der Flexseite an der Endseite ist bündig mit der Endkante der Linie.

center

Der Rand des Flex-Elementes wird innerhalb der Linie auf der Kreuzachse zentriert. Wenn die Kreuzgröße des Elements größer als der Flex-Container ist, überläuft es gleichmäßig in beide Richtungen.

baseline, first baseline, last baseline

Bestimmt die Teilnahme an der Ausrichtung der ersten oder letzten Basislinie: richtet die Ausrichtungsbasislinie des ersten oder letzten Basisliniensatzes des Elements mit der entsprechenden Basislinie in der gemeinsamen ersten oder letzten Basislinengruppe aller Boxen in der Basislinien-Teilungsgruppe aus. Die Ersatzausrichtung 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 als die Größe des Ausrichtungscontainers ist 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 respektiert werden, sodass die kombinierte Größe aller auto-großen Elemente genau den Ausrichtungscontainer entlang der Kreuzachse ausfü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 Zentrieren am Anker mithilfe von 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 2 x 2-Rasterlayout. Zunächst hat der Rastercontainer Werte für justify-items und align-items von stretch — den Standardwerten — was dazu führt, dass sich die Rasterelemente über die gesamte Breite ihrer Zellen erstrecken.

Den zweiten, dritten und vierten Rasterelementen werden dann unterschiedliche place-self Werte zugewiesen, um zu zeigen, wie diese die Standardplatzierungen überschreiben. Diese Werte führen dazu, dass sich die Rasterelemente nur so breit/hoch wie ihre Inhaltsbreite/-höhe erstrecken und in unterschiedlichen Positionen über ihre Zellen hinweg in Block- und Inline-Richtungen ausgerichtet sind.

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 im Rasterlayout
• CSS-Box-Ausrichtung Modul