justify-self

Probieren Sie es aus

justify-self: stretch;

justify-self: center;

justify-self: start;

justify-self: end;

<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: 40px;
  grid-gap: 10px;
}

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

Die Wirkung dieser Eigenschaft hängt vom Layoutmodus ab, in dem wir uns befinden:

• In Block-Level-Layouts richtet es ein Element innerhalb seines umschließenden Blocks auf der Inline-Achse aus.
• Für absolut positionierte Elemente richtet es ein Element innerhalb seines umschließenden Blocks auf der Inline-Achse aus, wobei die Offset-Werte von top, left, bottom und right berücksichtigt werden.
• In Tabellenzellen-Layouts wird diese Eigenschaft ignoriert. Lesen Sie mehr über Ausrichtung in Block-, absolut positionierten und Tabellen-Layouts.
• In Flexbox-Layouts wird diese Eigenschaft ignoriert. Lesen Sie mehr über Ausrichtung in Flexbox.
• In Grid-Layouts richtet es ein Element innerhalb seines Rasterbereichs auf der Inline-Achse aus. Lesen Sie mehr über Ausrichtung in Grid-Layouts.

Syntax

/* Basic keywords */
justify-self: auto;
justify-self: normal;
justify-self: stretch;

/* Positional alignment */
justify-self: center; /* Pack item around the center */
justify-self: start; /* Pack item from the start */
justify-self: end; /* Pack item from the end */
justify-self: flex-start; /* Equivalent to 'start'. Note that justify-self is ignored in flexbox layouts. */
justify-self: flex-end; /* Equivalent to 'end'. Note that justify-self is ignored in flexbox layouts. */
justify-self: self-start;
justify-self: self-end;
justify-self: left; /* Pack item from the left */
justify-self: right; /* Pack item from the right */
justify-self: anchor-center;

/* Baseline alignment */
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;

/* Overflow alignment (for positional alignment only) */
justify-self: safe center;
justify-self: unsafe center;

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

Diese Eigenschaft kann eine von drei verschiedenen Formen annehmen:

• Basisschlüsselwörter: eines der Schlüsselwortwerte normal, auto oder stretch.
• Basislinienausrichtung: das Schlüsselwort baseline, plus optional eines von first oder last.
• Positionale Ausrichtung:
  • eines von: center, start, end, flex-start, flex-end, self-start, self-end, left oder right.
  • Optional hinzugefügt safe oder unsafe.

Werte

auto

Der verwendete Wert ist der Wert der justify-items-Eigenschaft des übergeordneten Kastens, es sei denn, der Kasten hat keinen übergeordneten Kasten oder ist absolut positioniert. In diesen Fällen stellt auto normal dar.

normal

Die Wirkung dieses Schlüsselworts hängt vom Layoutmodus ab, in dem wir uns befinden:

• In Block-Level-Layouts ist das Schlüsselwort ein Synonym für start.
• In absolut positionierten Layouts verhält sich das Schlüsselwort wie start auf ersetzt absolut positionierten Kästen und wie stretch auf allen anderen absolut positionierten Kästen.
• In Tabellenzellen-Layouts hat dieses Schlüsselwort keine Bedeutung, da diese Eigenschaft ignoriert wird.
• In Flexbox-Layouts hat dieses Schlüsselwort keine Bedeutung, da diese Eigenschaft ignoriert wird.
• In Grid-Layouts führt dieses Schlüsselwort zu einem Verhalten ähnlich dem von stretch, außer bei Kästen mit einem Seitenverhältnis oder einer intrinsischen Größe, bei denen es sich wie start verhält.

start

Das Element wird bündig zueinander an den Startkantenrand des Ausrichtung-Containers auf der entsprechenden Achse gepackt.

end

Das Element wird bündig zueinander an den Endkantenrand des Ausrichtung-Containers auf der entsprechenden Achse gepackt.

flex-start

Bei Elementen, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie start behandelt.

flex-end

Bei Elementen, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie end behandelt.

self-start

Das Element wird bündig zur Kante des Ausrichtung-Containers der Startseite des Elements gepackt, auf der entsprechenden Achse.

self-end

Das Element wird bündig zur Kante des Ausrichtung-Containers der Endseite des Elements gepackt, auf der entsprechenden Achse.

center

Die Elemente werden bündig zueinander zur Mitte des Ausrichtung-Containers gepackt.

left

Die Elemente werden bündig zueinander zur linken Kante des Ausrichtung-Containers gepackt. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie start.

right

Die Elemente werden bündig zueinander zur rechten Kante des Ausrichtung-Containers auf der entsprechenden Achse gepackt. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie start.

baseline, first baseline, last baseline

Bestimmt die Teilnahme an der ersten oder letzten Basislinienausrichtung: richtet die Ausrichtlinie des ersten oder letzten Baselinesatzes des Kastens mit der entsprechenden Basislinie im gemeinsamen ersten oder letzten Baselinesatz aller Kästen in seiner Basislinien-Gruppe 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 kleiner als die Größe des Ausrichtung-Containers ist, wird jedes auto-große Element in seiner Größe gleich (nicht proportional) erhöht, wobei die durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Einschränkungen weiterhin eingehalten werden, so dass die kombinierte Größe genau den Ausrichtung-Container ausfüllt.

anchor-center

Im Fall von anker-positionierten Elementen richtet das Element im Inline-Bereich an der Mitte des zugehörigen Anker-Elements aus. Siehe Zentrieren am Anker mit anchor-center.

safe

Wenn die Größe des Elements das Ausrichtung-Container überschreitet, wird das Element stattdessen so ausgerichtet, als wäre der Ausrichtungsmodus start.

unsafe

Unabhängig von den relativen Größen des Elements und des Ausrichtung-Containers wird der gegebene Ausrichtungswert eingehalten.

Formale Definition

Formale Syntax

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 Grid-Layout. Zunächst erhält der Grid-Container einen justify-items-Wert von stretch — dem Standardwert —, was dazu führt, dass die Grid-Elemente sich über die gesamte Breite ihrer Zellen erstrecken.

Die zweiten, dritten und vierten Grid-Elemente erhalten dann verschiedene Werte von justify-self, um zu zeigen, wie diese den justify-items-Wert überschreiben. Diese Werte bewirken, dass sich die Grid-Elemente nur so breit wie ihre Inhaltsbreite erstrecken und sich an verschiedenen Positionen in ihren Zellen ausrichten.

HTML

<article class="container">
  <span>First child</span>
  <span>Second child</span>
  <span>Third child</span>
  <span>Fourth child</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: 40px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
  justify-items: stretch;
}

span:nth-child(2) {
  justify-self: start;
}

span:nth-child(3) {
  justify-self: center;
}

span:nth-child(4) {
  justify-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

• Kastenausrichtung im Grid-Layout
• CSS-Kastenausrichtungs-Modul
• justify-items
• align-self
• place-self