Nun lernst du, wie du die Flexbox-Container horizontal oder vertikal anordnen kannst. Dazu verwendest du flex-direction: row; oder flex-direction: column;. Diese Eigenschaften bestimmen, wie die Elemente in der Flexbox-Container angeordnet werden. Hier ein 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;
flex-direction: column; /* Stack items vertically */
justify-content: space-between; /* Space between items */
align-items: center;
height: 100vh;
}
.item {
flex: 1; /* Stack items vertically */
margin: 10px;
background-color: lightyellow;
}