justify-self

Die Wirkung dieser Eigenschaft hängt vom verwendeten Layout-Modus ab:

• In Block-Layout-Ebene richtet sie ein Element innerhalb seines umgebenden Blocks auf der Inline-Achse aus.
• Für absolut positionierte Elemente richtet sie ein Element innerhalb seines umgebenden Blocks auf der Inline-Achse aus und berücksichtigt dabei die Offsetwerte von oben, links, unten und rechts.
• In Tabellenzell-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 sie ein Element innerhalb seines Grid-Bereichs auf der Inline-Achse aus. Lesen Sie mehr über Ausrichtung in Grid-Layouts.

/* 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:

• Grundlegende Schlüsselwörter: eines der Schlüsselwortwerte normal, auto oder stretch.

• Baseline-Ausrichtung: das Schlüsselwort baseline, optional gefolgt von first oder last.

• Positionelle Ausrichtung:

  • eines von: center, start, end, flex-start, flex-end, self-start, self-end, left oder right.
  • Zusätzlich optional safe oder unsafe.

auto

Der verwendete Wert ist der Wert der justify-items Eigenschaft des übergeordneten Blocks, es sei denn, der Block hat keine übergeordnete Einheit oder ist absolut positioniert. In diesen Fällen repräsentiert auto normal.

normal

Die Wirkung dieses Schlüsselworts hängt vom verwendeten Layout-Modus ab:

• In Block-Layouts ist das Schlüsselwort ein Synonym für start.
• 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 Tabellenzell-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, das dem von stretch ähnelt, außer bei Boxen mit einem Seitenverhältnis oder intrinsischen Größen, bei denen es sich wie start verhält.

start

Das Element wird bündig zueinander in Richtung der Startkante des Ausrichtungs-Containers auf der entsprechenden Achse gepackt.

end

Das Element wird bündig zueinander in Richtung der Endkante des Ausrichtungs-Containers auf der entsprechenden Achse gepackt.

flex-start

Für Elemente, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie start behandelt.

flex-end

Für Elemente, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie end behandelt.

self-start

Das Element wird bündig an die Kante des Ausrichtungs-Containers auf der Startseite des Elements auf der entsprechenden Achse gepackt.

self-end

Das Element wird bündig an die Kante des Ausrichtungs-Containers auf der Endseite des Elements auf der entsprechenden Achse gepackt.

center

Die Elemente werden bündig zueinander in Richtung der Mitte des Ausrichtungs-Containers gepackt.

left

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

right

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

baseline, first baseline, last baseline

Bestimmt die Teilnahme an der ersten- oder letzten-Baseline-Ausrichtung: richtet die Ausrichtungsbasislinie des ersten oder letzten Baseline-Sets der Box mit der entsprechenden Baseline im gemeinsamen ersten oder letzten Baseline-Set aller Boxen in ihrer Baseline-Teilungsgruppe aus. Das Fallback-Ausrichtung für first baseline ist start, die für last baseline ist end.

stretch

Wenn die kombinierte Größe der Elemente kleiner ist als die Größe des Ausrichtungs-Containers, haben alle in auto-Größe bemessenen Elemente ihre Größe gleichermaßen (nicht proportional) erhöht, wobei die durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Beschränkungen eingehalten werden, so dass die kombinierte Größe genau den Ausrichtungs-Container ausfüllt.

anchor-center

Im Falle von anchor-positionierten Elementen richtet es das Element in der Inline-Richtung in der Mitte des zugehörigen Anker-Elements aus. Siehe Zentrierung am Anker mit anchor-center.

safe

Wenn die Größe des Elements den Ausrichtungs-Container überläuft, wird das Element stattdessen so ausgerichtet, als ob der Ausrichtungs-Modus start wäre.

unsafe

Ungeachtet der relativen Größen des Elements und des Ausrichtungs-Containers wird der angegebene Ausrichtungswert beachtet.

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

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

<overflow-position> = 
  unsafe  |
  safe    

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

Im folgenden Beispiel haben wir ein einfaches 2 x 2 Grid-Layout. Zunächst erhält der Grid-Container einen justify-items Wert von stretch — dem Standard —, der verursacht, dass die Grid-Elemente über die gesamte Breite ihrer Zellen gestreckt werden.

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 die Grid-Elemente nur so breit wie ihre Inhaltsbreite spannen und unterschiedlich über ihre Zellen hinweg ausgerichtet werden.

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

• Box-Ausrichtung in CSS-Grid-Layouts
• CSS-Box-Ausrichtung Modul
• justify-items
• align-self
• place-self