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 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 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, das dem von stretch ähnelt, außer bei Boxen mit einem Aspektverhä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 an der Kante des Ausrichtungscontainers aus, die der Startseite des Elements auf der Kreuzachse entspricht.

self-end

Richtet die Elemente bündig an der Kante des Ausrichtungscontainers aus, die der Endseite des Elements auf der Kreuzachse entspricht.

flex-start

Der Marginalrand des Flex-Elements am Anfang wird mit dem Start-Rand der Linie bündig ausgerichtet.

flex-end

Der Marginalrand des Flex-Elements am Ende wird mit dem End-Rand der Linie bündig ausgerichtet.

center

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

baseline, first baseline, last baseline

Gibt die Teilnahme an der Ausrichtung der ersten oder letzten Basislinie an: richtet die Ausrichtungsbasislinie des ersten oder letzten Basissatzes der Box mit der entsprechenden Basislinie in der gemeinsamen ersten oder letzten Basissatzgruppe aller Boxen in ihrer Basisliniengruppe aus. Die Fallback-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 als die Größe des Ausrichtungscontainers ist und das Element auf auto-Größe gesetzt ist, wird seine Größe gleichmäßig (nicht proportional) erhöht, unter Beachtung der durch max-height/max-width auferlegten Einschränkungen (oder gleichwertiger Funktionalität), sodass die kombinierte Größe aller auto-größen Elemente den Ausrichtungscontainer entlang der Kreuzachse genau füllt.

anchor-center

Im Falle von anker-positionierten Elementen richtet es das Element auf die Mitte des zugehörigen Ankerelements in Block- und Inline-Richtung aus. Siehe Zentrierung 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 2 x 2 Grid-Layout. Zunächst hat der Grid-Container die Werte justify-items und align-items von stretch — den Standardwerten —, wodurch die Grid-Elemente sich über die gesamte Breite ihrer Zellen erstrecken.

Den zweiten, dritten und vierten Grid-Elementen werden dann unterschiedliche Werte von place-self zugewiesen, um zu zeigen, wie diese die Standardplatzierungen überschreiben. Diese Werte bewirken, dass sich die Grid-Elemente nur so weit/hoch wie ihre Inhaltsbreite/-höhe erstrecken und sich in unterschiedliche Positionen in ihren 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
• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Box-Ausrichtung im Grid-Layout
• CSS Box-Ausrichtungsmodul