place-self CSS-Eigenschaft

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;
}

Zugehörige Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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

Berechnet sich zum Wert von align-items des Elternteils.

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 Seitenverhältnis oder einer intrinsischen Größe, wo es sich wie start verhält.
• Die Eigenschaft gilt nicht für Block-Elemente und Tabellenzellen.

self-start

Richten Sie die Elemente so aus, dass sie mit dem Rand des Ausrichtungscontainers übereinstimmen, der der Startseite des Elements in der Kreuzachse entspricht.

self-end

Richten Sie die Elemente so aus, dass sie mit dem Rand des Ausrichtungscontainers übereinstimmen, der der Endseite des Elements in der Kreuzachse entspricht.

flex-start

Der Rand der Flex-Elemente am Anfang der Kreuzachse wird mit dem Anfangsrand der Linie abgeglichen.

flex-end

Der Rand der Flex-Elemente am Ende der Kreuzachse wird mit dem Endrand der Linie abgeglichen.

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, läuft es in beide Richtungen über.

baseline, first baseline, last baseline

Spezifiziert die Teilnahme an der Ausrichtung zur ersten oder letzten Basislinie: richtet die Ausrichtungsbasislinie der ersten oder letzten Basissatz der Box mit der entsprechenden Basislinie in der gemeinsamen ersten oder letzten Basisliniensatz aller Boxen in ihrer Basislinien-Sharing-Gruppe aus. Die Ausrichtungsfalle 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 ist als die Größe des Ausrichtungscontainers und das Element auto-größenbasiert ist, wird seine Größe gleichmäßig (nicht proportional) vergrößert, wobei die durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Beschränkungen respektiert werden, sodass die kombinierte Größe aller auto-größengebasierten Elemente den Ausrichtungscontainer entlang der Kreuzachse genau ausfüllt.

anchor-center

Bei ankerpositionierten Elementen richtet das Element entlang der Block- und Inline-Richtung im Zentrum des zugeordneten Ankerelements aus. Siehe Zentrierung am Anker mit anchor-center.

Formale Definition

Formale Syntax

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

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

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

<overflow-position> = 
  unsafe  |
  safe    

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

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

Beispiele

Grundlegende Demonstration

Im folgenden Beispiel haben wir ein 2 x 2 Grid-Layout. Anfangs hat der Grid-Container justify-items und align-items Werte von stretch — die Standardwerte —, was dazu führt, dass die Grid-Elemente über die gesamte Breite ihrer Zellen gestreckt werden.

Die zweiten, dritten und vierten Grid-Elemente erhalten dann unterschiedliche Werte für place-self, um zu zeigen, wie diese die Standardplatzierungen übersteuern. Diese Werte bewirken, dass die Grid-Elemente nur so breit/hoch wie ihre Inhaltsbreite/-höhe sind und in unterschiedlichen Positionen innerhalb ihrer Zellen in der Block- und Inline-Richtung ausgerichtet werden.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• align-self
• justify-self
• Grundkonzepte von Flexbox
• Ausrichtung von Elementen in einem Flex-Container
• Box-Ausrichtung in Grid-Layout
• CSS-Box-Ausrichtung Modul