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

Bestandteileigenschaften

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üsselwortwerte angegeben:

auto

Ermittelt sich zum Wert des Elternelements bei align-items.

normal

Die Wirkung dieses Schlüsselwortes hängt vom Layoutmodus 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.
• Bei Flex-Elementen verhält sich das Schlüsselwort wie stretch.
• Bei Grid-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, wo 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 Ausrichtungscontainers aus, der der Startseite des Elements in der Querachse entspricht.

self-end

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

flex-start

Der Queranfang-Margenrand des Flex-Elements ist bündig mit dem Queranfangrand der Linie.

flex-end

Der Querend-Margenrand des Flex-Elements ist bündig mit dem Querendrand der Linie.

center

Die Margenbox des Flex-Elements wird innerhalb der Linie auf der Querachse zentriert. Ist die Körperspanne des Elements größer als der Flex-Container, wird es in beide Richtungen gleichmäßig überlaufen.

baseline, first baseline, last baseline

Gibt die Teilnahme an der ersten oder letzten Basislinienausrichtung an: richtet die Ausrichtungsbasislinie des ersten oder letzten Basislinensets der Box an der entsprechenden Basislinie im gemeinsamen ersten oder letzten Basislinenset aller Boxen in seiner Basislinien-Sharing-Gruppe 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 Querachse kleiner ist als die Größe des Ausrichtungscontainers und das Element auf auto gesetzt ist, wird seine Größe gleichmäßig (nicht proportional) erhöht, während dennoch die durch max-height/max-width (oder gleichwertige Funktionalitäten) auferlegten Einschränkungen respektiert werden, sodass die kombinierte Größe aller auto-größengesteuerten Elemente den Ausrichtungscontainer entlang der Querachse genau ausfüllt.

anchor-center

Bei ankerpositionierten Elementen richtet es das Element in der Mitte des zugehörigen Ankerelements in Block- und Inlinerichtung aus. Siehe Zentrierung auf dem 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. Zunächst hat der Grid-Container die justify-items und align-items Werte stretch — die Standardwerte — was bewirkt, dass sich die Grid-Elemente über die gesamte Breite ihrer Zellen erstrecken.

Die zweiten, dritten und vierten Grid-Elemente erhalten dann unterschiedliche Werte für place-self, um zu zeigen, wie diese die Standardplatzierungen überschreiben. Diese Werte bewirken, dass die Grid-Elemente nur so breit/hoch wie ihre Inhaltsbreite/-höhe sind, und sie in ihren Zellen unterschiedlich positioniert werden, in Block- und Inlinerichtung.

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
• Ausrichten von Elementen in einem Flex-Container
• Box-Ausrichtung im Grid-Layout
• CSS Box-Ausrichtung Modul