CSS - place-self Eigenschaft: Ein Anfängerleitfaden

Hallo da drüben, zukünftige CSS-Meister! Heute tauchen wir in die wunderbare Welt von CSS ein und erkunden eine kleine, aber feine Eigenschaft namens place-self. Machen Sie sich keine Sorgen, wenn Sie neu hier sind; ich werde Sie Schritt für Schritt durchführen, genau wie ich es mit meinen Schülern seit Jahren tue. Am Ende dieses Tutorials werden Sie Elemente wie ein Profi platzieren können!

Was ist place-self?

Bevor wir ins tiefe Wasser springen,fangen wir mit den Grundlagen an. Die place-self Eigenschaft ist eine Abkürzung, um sowohl die align-self als auch die justify-self Eigenschaften in einer einzigen Deklaration festzulegen. Es ist so, als ob man mit einem Stein zwei Fliegen schlägt, aber viel menschlicher und CSS-bezogen!

Syntax

Die Syntax für place-self ist quite einfach:

place-self: <align-self> <justify-self>;

Wenn Sie nur einen Wert angeben, wird er sowohl für align-self als auch für justify-self angewendet. Es ist wie ein Kombomeal zu bestellen – man bekommt zwei Dinge für den Preis von einem!

Mögliche Werte

Nun schauen wir uns die verschiedenen Werte an, die wir mit place-self verwenden können. Ich werde sie in einer Tabellenform präsentieren, was ich finde, hilft den Schülern, Informationen leichter zu verdauen:

Wert	Beschreibung
auto	Das Element erbt das Verhalten von align-self/justify-self seines übergeordneten Containers
normal	Das Element wird gemäß dem normalen Fluss des Dokuments positioniert
start	Ausrichtet das Element an der Beginning des Containers
end	Ausrichtet das Element an der End des Containers
center	Zentriert das Element in seinem Container
stretch	Dehnt das Element, um den Container zu füllen
flex-start	Ausrichtet das Element an der Beginning des Flex-Containers
flex-end	Ausrichtet das Element an der End des Flex-Containers
self-start	Ausrichtet das Element an der Beginning seiner eigenen Achse
self-end	Ausrichtet das Element an der End seiner eigenen Achse
baseline	Ausrichtet das Element an derBaseline des Containers
first baseline	Ausrichtet das Element an der erstenBaseline des Containers
last baseline	Ausrichtet das Element an der letztenBaseline des Containers

Gültig für

Die place-self Eigenschaft gilt für Rasteritems und Flexitems. Es ist wie eine besondere Kraft, die nur bestimmte Superhelden (oder in unserem Fall, Elemente) besitzen!

Nun tauchen wir in einige Beispiele ein, um zu sehen, wie diese Werte in der Praxis funktionieren.

CSS place-self - normal start Wert

.item {
place-self: normal start;
}

Diese Deklaration positioniert das Element gemäß dem normalen Fluss für die Ausrichtung und an der Beginning des Containers für die Ausrichtung. Es ist, als würde man seinem Element sagen: "Sei normal, aber beginne am Anfang!"

CSS place-self - auto center Wert

.item {
place-self: auto center;
}

Hier sagen wir: "Erbe die Ausrichtung von deinem Parent, aber zentriere dich horizontal." Es ist perfekt für Elemente, die vertikal mit dem Fluss gehen, aber horizontal hervorstechen möchten.

CSS place-self - center normal Wert

.item {
place-self: center normal;
}

Dies zentriert das Element vertikal, aber hält es im normalen Fluss horizontal. Stellen Sie sich vor, Ihr Element ist auf einer Party – es ist mittendrin im Raum, aber folgt noch immer den üblichen Partymannschaften!

CSS place-self - end normal Wert

.item {
place-self: end normal;
}

Dies ausrichtet das Element an der End seines Containers vertikal und hält es im normalen Fluss horizontal. Es ist, als würde Ihr Element auf Zehenspitzen an der Rückseite einer Menschenmenge stehen!

CSS place-self - start auto Wert

.item {
place-self: start auto;
}

Dies positioniert das Element an der Beginning seines Containers vertikal und erbt die horizontale Ausrichtung. Es sagt: "Ich werde an der Spitze beginnen, aber ich gehe horizontal mit dem Fluss."

CSS place-self - self-start auto Wert

.item {
place-self: self-start auto;
}

Dies ausrichtet das Element an der Beginning seiner eigenen Kante vertikal und erbt die horizontale Ausrichtung. Es ist, als würde Ihr Element vertikal seine eigene Sache machen, aber horizontal der Menschenmenge folgen.

CSS place-self - self-end normal Wert

.item {
place-self: self-end normal;
}

Dies ausrichtet das Element an der End seiner eigenen Kante vertikal und hält es im normalen Fluss horizontal. Es ist, als würde Ihr Element nach oben greifen, während seine Füße fest auf dem Boden stehen!

CSS place-self - flex-start auto Wert

.item {
place-self: flex-start auto;
}

In einem Flex-Container ausrichtet dies das Element an der Beginning des Containers vertikal und erbt die horizontale Ausrichtung. Es ist perfekt für Flex-Elemente, die oben beginnen, aber horizontal dem Flex-Fluss folgen möchten.

CSS place-self - flex-end normal Wert

.item {
place-self: flex-end normal;
}

In einem Flex-Container ausrichtet dies das Element an der End des Containers vertikal und hält es im normalen Fluss horizontal. Es ist, als würde Ihr Flex-Element eine Handstand machen!

CSS place-self - baseline normal Wert

.item {
place-self: baseline normal;
}

Dies ausrichtet dieBaseline des Elements mit derBaseline seines Containers vertikal und hält es im normalen Fluss horizontal. Es ist großartig, um Text across verschiedene Elemente auszurichten.

CSS place-self - last baseline normal Wert

.item {
place-self: last baseline normal;
}

Ähnlich wieBaseline, aber es verwendet die letzteBaseline, wenn mehrere Baselines existieren. Es ist, als würde Ihr Element das letzte Wort haben!

CSS place-self - stretch auto Wert

.item {
place-self: stretch auto;
}

Dies dehnt das Element, um den Container vertikal zu füllen und erbt die horizontale Ausrichtung. Es ist, als würde Ihr Element sagen: "Ich werde so groß sein, wie ich kann, aber ich gehe horizontal mit dem Fluss."

Und da haben Sie es, Leute! Wir haben die place-self Eigenschaft und ihre verschiedenen Werte erkundet. Denken Sie daran, der Schlüssel zum Beherrschen von CSS ist die Übung. Also experimentieren Sie mit diesen Werten, mischen und kombinieren Sie sie und sehen Sie, welche schönen Layouts Sie erstellen können!

In meinen Jahren des Unterrichtens habe ich festgestellt, dass Schüler, die experimentieren und Spaß am CSS haben, schneller lernen und mehr behalten. Also haben Sie keine Angst, kreativ zu sein! Wer weiß? Vielleicht entdecken Sie eine Kombination, die zu Ihrem Signaturstil wird.

Happy Coding und möge Ihre Elemente immer perfekt platziert sein!

Credits: Image by storyset