place-self

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

• align-self
• justify-self

auto

Berechnet sich zum Wert des Elternelements von align-items.

normal

Die Wirkung dieses Schlüsselworts hängt vom genutzten Layoutmodus 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.
• Bei Flex-Elementen verhält sich das Schlüsselwort wie stretch.
• Bei Grid-Elementen 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 Tabellenspalten.

self-start

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

self-end

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

flex-start

Der startende Rand des Flex-Elements ist bündig mit dem startenden Rand der Linie.

flex-end

Der endende Rand des Flex-Elements ist bündig mit dem endenden Rand der Linie.

center

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

baseline, first baseline, last baseline

Spezifiziert die Teilnahme an der ersten oder letzten Baseline-Ausrichtung: richtet die Baseline-Ausrichtungsline der ersten oder letzten Baseline-Setzung der Box mit der entsprechenden Baseline in der gemeinsamen ersten oder letzten Baseline-Setzung aller Boxen in ihrer Baseline-Gruppe aus. Die Fallback-Ausrichtung für first baseline ist start, für last baseline ist sie end.

stretch

Wenn die kombinierte Größe der Elemente entlang der Kreuzachse kleiner als die Größe des Anpassungscontainers ist und das Element auf auto-Größe gesetzt ist, wird seine Größe gleichmäßig (nicht proportional) erhöht, während die durch max-height/max-width auferlegten Einschränkungen eingehalten werden, so dass die kombinierte Größe aller auto-großen Elemente genau den Anpassungscontainer entlang der Kreuzachse füllt.

anchor-center

Bei anchor-positioned Elementen richtet das Element in der Block- und Inline-Richtung auf die Mitte des zugehörigen Anker-Elements aus. 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 Rasterlayout. Zunächst hat der Raster-Container die Werte justify-items und align-items von stretch — die Standardwerte — was dazu führt, dass die Raster-Elemente die gesamte Breite ihrer Zellen ausfüllen.

Die zweiten, dritten und vierten Raster-Elemente erhalten dann unterschiedliche Werte von place-self, um zu zeigen, wie diese die Standardplatzierung überschreiben. Diese Werte bewirken, dass die Raster-Elemente nur so weit/hoch wie ihre Inhaltsbreite/-höhe reichen und in verschiedenen Positionen in ihren Zellen in Block- und Inline-Richtung 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
• Grundlegende Konzepte von Flexbox
• Ausrichtung von Elementen in einem Flex-Container
• Box-Ausrichtung in CSS-Rasterlayouts
• CSS-Box-Ausrichtungsmodul