CSS - place-content: Ein freundlicher Leitfaden für Anfänger

Hallo da draußen, zukünftiger Webdesign-Superstar! ? Bist du bereit, in die wunderbare Welt von CSS einzutauchen? Heute werden wir eine kleine, aber feine Eigenschaft namens place-content erkunden. Glaub mir, sie wird dein Leben viel einfacher machen, wenn du versuchst, Dinge in deinen Web-Layouts auszurichten. Also hol dir einen Becher Kaffee (oder Tee, wenn das dein Ding ist) und lassen wir loslegen!

Was ist place-content?

Stell dir vor, du räumst Möbel in einem Raum ein. Du möchtest alles perfekt aussehen, aber jedes Stück einzeln zu bewegen ist nervig. Genau hier kommt place-content ins Spiel - es ist wie eine magischestab, der dir hilft, Elemente auf deiner Webseite mit Leichtigkeit anzuordnen!

Die Eigenschaft place-content ist eine Abkürzung für das gleichzeitige Einstellen von align-content und justify-content. Es ist wie zwei Fliegen mit einer Klappe schlagen (aber keine Sorge, keine Vögel wurden bei der Erstellung dieser CSS-Eigenschaft verletzt ?).

Mögliche Werte

Oh je, wir haben einige Optionen hier! Lassen wir sie in einer schönen, leicht lesbaren Tabelle durcharbeiten:

Wert	Beschreibung
center	Zentriert den Inhalt sowohl vertikal als auch horizontal
start	Richtet den Inhalt an der Anfangsposition des Behälters aus
end	Richtet den Inhalt an der Endposition des Behälters aus
flex-start	Ähnlich wie start, aber für Flex-Behälter
flex-end	Ähnlich wie end, aber für Flex-Behälter
baseline	Richtet den Inhalt entlang der Grundlinie aus
space-between	Verteilt die Elemente gleichmäßig mit Abstand dazwischen
space-around	Verteilt die Elemente gleichmäßig mit Abstand drumherum
space-evenly	Verteilt die Elemente mit gleichem Abstand dazwischen und drumherum

Mach dir keine Sorgen, wenn das überwältigend scheint - wir werden jeden einzelnen Wert mit Beispielen durchgehen!

Gültig für

Bevor wir ins Detail gehen, ist es wichtig zu wissen, wo wir place-content verwenden können. Diese Eigenschaft gilt für:

• Grid-Behälter
• Flex-Behälter

Also, wenn du mit Gittern oder Flexbox arbeitest (was, glaub mir, du wirst), ist place-content dein neuer bester Freund!

Syntax

Die grundlegende Syntax für place-content ist super einfach:

.container {
place-content: <align-content> <justify-content>;
}

Du kannst einen oder zwei Werte verwenden. Wenn du einen Wert verwendest, wird er für beide Ausrichtungen angewendet. Wenn du zwei Werte verwendest, ist der erste für align-content (vertikale Ausrichtung) und der zweite für justify-content (horizontale Ausrichtung).

Nun, lassen's uns einige spezifische Beispiele anschauen!

CSS place-content - center start Wert

.container {
display: grid;
place-content: center start;
height: 200px;
border: 2px solid #333;
}

In diesem Beispiel wird der Inhalt vertikal zentriert, aber horizontal an der Anfangsposition (linker Seite in linksläufigen Sprachen) ausgerichtet. Es ist, als ob du alle Möbel an einer Seite des Raumes platzierst, aber vertikal in der Mitte.

CSS place-content - start center Wert

.container {
display: flex;
place-content: start center;
height: 200px;
border: 2px solid #333;
}

Hier machen wir das Gegenteil - den Inhalt oben ausrichten, aber horizontal zentrieren. Stell dir vor, alle Möbel entlang der oberen Wand aufzureihen, aber gleichmäßig von links nach rechts zu verteilen.

CSS place-content - end right Wert

.container {
display: grid;
place-content: end right;
height: 200px;
border: 2px solid #333;
}

Dies schiebt alle Inhalte in die untere rechte Ecke des Behälters. Es ist, als ob du alle Möbel in eine Ecke des Raumes schiebst (was ich im echten Leben nicht empfehlen würde ?).

CSS place-content - flex-start center Wert

.container {
display: flex;
place-content: flex-start center;
height: 200px;
border: 2px solid #333;
}

Ähnlich wie start center, aber speziell für Flex-Behälter. Dein Inhalt wird oben (oder links in Spaltenrichtung) und horizontal zentriert.

CSS place-content - flex-end center Wert

.container {
display: flex;
place-content: flex-end center;
height: 200px;
border: 2px solid #333;
}

Dies ist wie flex-start center, aber richtet an der Endposition des Flex-Behälters aus anstatt an der Anfangsposition.

CSS place-content - last baseline Wert

.container {
display: grid;
place-content: last baseline;
height: 200px;
border: 2px solid #333;
}

Dieses ist etwas tricky. Es richtet den Inhalt entlang der Grundlinie der letzten Textzeile aus. Es ist, als ob du sicherstellst, dass alle Texte sauber auf einer unsichtbaren Linie sitzen.

CSS place-content - space-between Wert

.container {
display: flex;
place-content: space-between;
height: 200px;
border: 2px solid #333;
}

Dies verteilt die Elemente gleichmäßig, mit dem ersten Element an der Anfangsposition und dem letzten an der Endposition. Stell dir vor, Möbel im Raum mit gleichem Abstand zwischen jedem Stück, aber an den Rändern gedrückt.

CSS place-content - space-around Wert

.container {
display: grid;
place-content: space-around;
height: 200px;
border: 2px solid #333;
}

Ähnlich wie space-between, aber es fügt auch Abstand vor dem ersten und nach dem letzten Element hinzu. Es ist, als ob jedem Möbelstück seinen eigenen kleinen Bereich im Raum gibt.

CSS place-content - space-evenly Wert

.container {
display: flex;
place-content: space-evenly;
height: 200px;
border: 2px solid #333;
}

Dies verteilt die Elemente mit gleichem Abstand dazwischen und drumherum. Es ist der am besten ausgewogene Ansatz, wie das perfekte Verteilen von Möbelstücken im Raum.

Und das war's! Du hast jetzt die Eigenschaft place-content und ihre verschiedenen Werte gelernt. Denke daran, Übung macht den Meister, also habe keine Angst, diese in deinen eigenen Projekten auszuprobieren. Bereit zu sein, Inhalte wie ein Profi auszurichten!

Weiter codieren, weiter lernen und vor allem, Spaß dabei haben! ??‍??‍?

Credits: Image by storyset