In dieser Lektion lernst du, wie du Flexbox in CSS verwendest, um flexibel und responsive Seitenstrukturen zu erstellen. Flexbox ist ein sehr mächtiges Layout-System, das es dir ermöglicht, Elemente auf einer Seite zu ordnen, zu strecken und zu verändern, ohne dass du viel Code schreiben musst. Sei dir bewusst, dass Flexbox die Elemente in einer Flexbox-Container anordnet, sodass sie flexibel sind und die verfügbare Länge nutzen. Hier ein einfaches Beispiel:
<!-- HTML -->
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
/* CSS */
.container {
display: flex;
justify-content: center; /* Center items horizontally */
align-items: center; /* Center items vertically */
height: 100vh; /* Full viewport height */
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}