Zum Inhalt springen

Vertiefung 10: Flexbox und Grid in CSS

Schritt 2 von 7

Um Flexbox effektiv zu verwenden, müssen Sie die Eigenschaft display: flex auf dem übergeordneten Element setzen. Dies deklariert das Element als Flexcontainer. Flexbox bietet verschiedene Eigenschaften, um die Ausrichtung und Verhalten der Kinder in einem Flexcontainer zu steuern. Im obigen Beispiel wird justify-content zur Verteilung des Raums zwischen den Kindern verwendet, und align-items für die Ausrichtung der Kinder innerhalb des Containers.

/* Beispiel für Grid */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}