CSS - Eigenschaft justify-self: Beherrschung der Ausrichtung von Grid-Elementen

Hallo da draußen, zukünftige CSS-Zauberer! Heute tauchen wir ein in die magische Welt der justify-self Eigenschaft. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich durch diese aufregende Reise zu führen. Also, nimm deine virtuellen Zauberstäbe (Tastaturen) und lasst uns einige CSS-Zauber werfen!

Was ist justify-self?

Bevor wir uns den Details widmen, lassen wir uns verstehen, was justify-self eigentlich macht. Stell dir vor, du hast einen Grid-Container, und darin hast du verschiedene Grid-Elemente. Die justify-self Eigenschaft ermöglicht es dir, diese einzelnen Grid-Elemente entlang der inline (horizontalen) Achse auszurichten. Es ist, als würde jedes Element seinen eigenen persönlichen Stylisten haben, der entscheidet, wo es im Rampenlicht stehen sollte!

Syntax und mögliche Werte

Die grundlegende Syntax für justify-self ist einfach:

.grid-item {
justify-self: value;
}

Nun schauen wir uns alle möglichen Werte an:

Wert	Beschreibung
auto	Der Browser entscheidet über die Ausrichtung
normal	Ähnlich wie auto
stretch	Dehnt das Element aus, um die Zelle zu füllen
start	Ausrichtet an der Anfangskante der Zelle
end	Ausrichtet an der Endkante der Zelle
center	Zentriert das Element in der Zelle
flex-start	Ausrichtet an der Anfangskante (für Flex-Container)
flex-end	Ausrichtet an der Endkante (für Flex-Container)
self-start	Ausrichtet an der Anfangskante basierend auf der Richtung des Elements
self-end	Ausrichtet an der Endkante basierend auf der Richtung des Elements
left	Ausrichtet an der linken Seite der Zelle
right	Ausrichtet an der rechten Seite der Zelle
baseline	Ausrichtet an derBaseline der Zelle
last baseline	Ausrichtet an der letztenBaseline der Zelle

Wow, das ist eine ziemlich lange Liste! Keine Sorge, wenn es überwältigend erscheint; wir werden es mit Beispielen näher erläutern.

Anwendungsbereich

Bevor wir uns Beispiele ansehen, ist es wichtig zu beachten, dass justify-self angewendet wird auf:

• Grid-Elemente
• Absolut positionierte Elemente, deren containierender Block ein Grid-Container ist

Nun Tauchen wir ein in jeden Wert mit einigen praktischen Beispielen!

CSS justify-self - auto Wert

.grid-item {
justify-self: auto;
}

Mit auto übernimmt der Browser das Steuer. Es ist, als würde man seinem Element sagen: "Gehe dahin, wo du denkst, dass es am besten ist!" Normalerweise verhält sich dies ähnlich wie stretch.

CSS justify-self - normal Wert

.grid-item {
justify-self: normal;
}

normal ist der Standardwert und verhält sich typischerweise wie stretch für Grid-Elemente. Es ist die "Ich bin mir nicht sicher, aber ich versuche mein Glück" von den justify-self Werten!

CSS justify-self - stretch Wert

.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
}

.grid-item {
justify-self: stretch;
background-color: lightblue;
}

Dieser Wert dehnt das Element aus, um die gesamte Breite seiner Grid-Zelle zu füllen. Es ist, als würde man seinem Element sagen: "Geh groß oder geh nach Hause!"

CSS justify-self - start Wert

.grid-item {
justify-self: start;
}

Dies ausrichtet das Element an der Anfangskante seiner Grid-Zelle. Stell dir vor, das Element kuschelt sich an die linke Wand seines Raumes.

CSS justify-self - end Wert

.grid-item {
justify-self: end;
}

Entgegengesetzt von start, schiebt dies das Element an die Endkante seiner Zelle. Es ist, als würde das Element Versteckspiel hinter der rechten Wand spielen.

CSS justify-self - center Wert

.grid-item {
justify-self: center;
}

Dies platzier das Element genau in der Mitte seiner Zelle. Perfekt für Elemente, die gerne im Mittelpunkt der Aufmerksamkeit stehen!

CSS justify-self - flex-start und flex-end Werte

.grid-item {
justify-self: flex-start; /* oder flex-end */
}

Diese Werte sind ähnlich zu start und end, aber werden typischerweise in Flex-Kontexten verwendet. In Grid-Anordnungen verhalten sie sich normalerweise genauso wie start und end.

CSS justify-self - self-start und self-end Werte

.grid-item {
justify-self: self-start; /* oder self-end */
}

Diese richten das Element basierend auf seiner eigenen Richtung aus. Wenn die Richtung des Elements ltr (links nach rechts) ist, ist self-start dasselbe wie start. Es ist, als hätte das Element eine Kompass, der immer auf seinen persönlichen Norden zeigt!

CSS justify-self - left und right Werte

.grid-item {
justify-self: left; /* oder right */
}

Diese Werte richten das Element an der linken oder rechten Kante der Zelle aus, unabhängig vom Schreibmodus oder der Richtung. Sie sind wie die sturköpfigen Cousins von start und end, die immer wissen, wo sie sein wollen.

CSS justify-self - baseline und last baseline Werte

.grid-item {
justify-self: baseline; /* oder last baseline */
}

Diese richten das Element an derBaseline der Grid-Zelle aus. Es ist besonders nützlich, wenn du Textinhalt hast und ihn perfekt mit anderen Texten in angrenzenden Zellen ausrichten möchtest.

Alles zusammenbringen

Nun, da wir alle diese Werte erkundet haben, lassen uns ein spaßiges Beispiel erstellen, das mehrere justify-self Werte in Aktion zeigt:

<div class="grid-container">
<div class="grid-item start">Start</div>
<div class="grid-item end">End</div>
<div class="grid-item center">Center</div>
<div class="grid-item stretch">Stretch</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}

.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}

.start { justify-self: start; }
.end { justify-self: end; }
.center { justify-self: center; }
.stretch { justify-self: stretch; }

In diesem Beispiel haben wir einen Grid-Container mit vier Elementen, die jeweils einen anderen justify-self Wert demonstrieren. Es ist wie eine kleine CSS-Modenschau, bei der jedes Element auf seine einzigartige Weise posiert!

Und das ist es, meine lieben Schüler! Wir haben die Welt von justify-self bereist und ihre vielen Facetten und Möglichkeiten erkundet. Denke daran, CSS ist alles über Experimentieren und Kreativität. Habe keine Angst, diese Werte zu mischen und zu kombinieren, um Layouts zu erstellen, die einzigartig sind.

Als wir diese Lektion beenden, erinnere ich mich an einen weisen alten CSS-Weisen, der einmal sagte: "Mit großer Macht kommt große Verantwortung... um großartige Layouts zu erstellen!" Also, geht los, experimentiert und möge eure Grids immer perfekt ausgerichtet sein!

Credits: Image by storyset