place-self

Probieren Sie es aus

place-self: stretch center;

place-self: center start;

place-self: start end;

place-self: end center;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 220px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Zusammengesetzte Eigenschaften

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

• align-self
• justify-self

Syntax

/* Positional alignment */
place-self: auto center;
place-self: normal start;
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
place-self: anchor-center;

/* Baseline alignment */
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

/* Global values */
place-self: inherit;
place-self: initial;
place-self: revert;
place-self: revert-layer;
place-self: unset;

Werte

auto

Wird auf den Wert des übergeordneten Elements für align-items berechnet.

normal

Die Wirkung dieses Schlüsselworts hängt von dem 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 statischer 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 Gitterelementen führt dieses Schlüsselwort zu einem ähnlichen Verhalten wie 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 für 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 Querachse 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 Querachse entspricht.

flex-start

Der cross-start Margin-Rand des Flex-Elements ist mit dem cross-start Rand der Zeile bündig.

flex-end

Der cross-end Margin-Rand des Flex-Elements ist mit dem cross-end Rand der Zeile bündig.

center

Die Margin-Box des Flex-Elements ist in der Linie auf der Querachse zentriert. Wenn die Quergröß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 Ausrichtung der ersten oder letzten Baseline: richtet die Ausrichtungsbaseline des ersten oder letzten Baseline-Sets der Box mit der entsprechenden Baseline im gemeinsamen ersten oder letzten Baseline-Set aller Boxen in seiner Baseline-Sharing-Gruppe aus. Die Ausrichtungsweichensfall-Option für first baseline ist start, die für last baseline ist end.

stretch

Wenn die kombinierte Größe der Elemente entlang der Querachse kleiner ist als die Größe des Ausrichtungscontainers und das Element auto-sized ist, wird seine Größe gleichmäßig erhöht (nicht proportional), während die durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Einschränkungen weiterhin beachtet werden, sodass die kombinierte Größe aller auto-sized Elemente genau den Ausrichtungscontainer entlang der Querachse ausfüllt.

anchor-center

Im Fall von Anker-positionierten Elementen richtet das Element zum Zentrum des zugehörigen Ankerelements in der Block- und Inline-Richtung aus. Siehe Zentrieren auf dem Anker mit anchor-center.

Formale Definition

Formale Syntax

place-self = 
  <'align-self'> <'justify-self'>?  

<align-self> = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center                         |
  dialog                                

<justify-self> = 
  auto                                                |
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  anchor-center                                       |
  dialog                                              

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end    

Beispiele

Grundlegende Demonstration

Im folgenden Beispiel haben wir ein 2 x 2 Rasterlayout. Zunächst hat der Rastercontainer die Standardwerte stretch für justify-items und align-items, was dazu führt, dass die Rasterelemente die gesamte Breite ihrer Zellen ausfüllen.

Den zweiten, dritten und vierten Rasterelementen werden dann unterschiedliche Werte von place-self zugewiesen, um zu zeigen, wie diese die Standardplatzierungen überschreiben. Diese Werte bewirken, dass die Rasterelemente nur so breit/hoch wie ihre Inhaltsbreite/-höhe sind und sich in verschiedenen Positionen über ihre 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;
}

Resultat

Spezifikationen

Browser-Kompatibilität

Siehe auch

• align-self
• justify-self
• Grundlegende Konzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Box-Ausrichtung in Rasterlayout
• CSS-Box-Ausrichtung Modul