CSS-Eigenschaft 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 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

Diese Eigenschaft wird als eines oder zwei der folgenden Schlüsselwort-Werte angegeben:

auto

Berechnet sich aus dem Wert von align-items des übergeordneten Elements.

normal

Die Wirkung dieses Schlüsselwortes 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 Raster-Elementen 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-Element-Boxen und Tabellzellen.

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 Anfangsrand des Flex-Elements liegt an der Anfängskante der Zeile an.

flex-end

Der Endrand des Flex-Elements liegt an der Endkante der Zeile an.

center

Die Randbox des Flex-Elements wird innerhalb der Zeile 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

Gibt die Teilnahme an der Erst- oder Letzt-Basislinienausrichtung an: Richtet die Ausrichtungsbasislinie des ersten oder letzten Basisliniensatzes der Box mit der entsprechenden Basislinie im gemeinsamen ersten oder letzten Basisliniensatz aller Boxen in ihrer Basislinienteilungsgruppe aus. Die Ersatz-Ausrichtung 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 als die Größe des Ausrichtungscontainers ist und das Element auf auto eingestellt ist, wird seine Größe gleichmäßig (nicht proportional) erhöht, wobei trotzdem die durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Einschränkungen beachtet werden, sodass die kombinierte Größe aller auto-elementierten Elemente den Ausrichtungscontainer entlang der Querachse genau ausfüllt.

anchor-center

Im Fall von Anker-positionierten Elementen richtet das Element in der Mitte des zugehörigen Ankerelements in der Block- und Inline-Richtung aus. Siehe Zentrieren auf den 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 Rasterlayout. Zu Beginn hat der Raster-Container die Werte justify-items und align-items von stretch — den Standardwerten —, wodurch die Raster-Elemente sich über die gesamte Breite ihrer Zellen erstrecken.

Dem zweiten, dritten und vierten Raster-Element werden dann unterschiedliche Werte für place-self zugewiesen, um zu zeigen, wie diese die Standardplatzierungen überschreiben. Diese Werte bewirken, dass sich die Raster-Elemente nur so breit/hoch wie ihre Inhaltsbreite/-höhe erstrecken und sich in unterschiedlichen Positionen über ihre Zellen hinweg, 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
• Grundlagen von Flexbox
• Ausrichtung von Elementen in einem Flex-Container
• Box-Ausrichtung in Raster-Layout
• CSS-Box-Ausrichtung-Modul