place-self

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

• align-self
• justify-self

auto

Errechnet sich zum Wert des übergeordneten Elements von align-items.

normal

Die Wirkung dieses Schlüsselwortes hängt vom verwendeten Layout-Modus ab:

• 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 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 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 dem Rand des Ausrichtungscontainers aus, der der Startseite des Elements in der Querachse entspricht.

self-end

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

flex-start

Der Margin-Rand des Flex-Elements an der Startseite wird mit dem Rand der Linie an der Startseite bündig ausgerichtet.

flex-end

Der Margin-Rand des Flex-Elements an der Endseite wird mit dem Rand der Linie an der Endseite bündig ausgerichtet.

center

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

baseline, first baseline, last baseline

Gibt die Teilnahme an der Ausrichtung auf die erste oder letzte Grundlinie an: richtet die Ausrichtungsgrundlinie des ersten oder letzten Grundliniensatzes der Box an der entsprechenden Grundlinie im gemeinsam genutzten ersten oder letzten Grundliniensatz aller Boxen in ihrer Grundlinien-Gruppierung aus. Die Ausrichtungsalternative für first baseline ist start, für last baseline ist es end.

stretch

Wenn die kombinierte Größe der Elemente entlang der Querachse kleiner ist als die Größe des Ausrichtungscontainers und das Element auto-Größe hat, 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, so dass die kombinierte Größe aller auto-Größe Elemente genau den Ausrichtungscontainer entlang der Querachse ausfüllt.

anchor-center

Im Fall von ankerpositionierten Elementen richtet das Element im Block- und Inline-Richtung am Zentrum des zugehörigen Ankerelements aus. Siehe Zentrieren auf dem 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 2 x 2 Grid-Layout. Anfänglich hat der Grid-Container die Werte justify-items und align-items von stretch — die Standardwerte —, was dazu führt, dass sich die Grid-Elemente über die gesamte Breite ihrer Zellen erstrecken.

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

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 des Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Ausrichtung von Boxen im Grid-Layout
• CSS-Box-Ausgleichsmodul