Flexbox erlaubt dir, die Ressourcen der verfügbaren Länge zu teilen. Dazu kannst du die flex-Eigenschaft in deinem CSS verwenden. Dies ist hilfreich, wenn du sicherstellen möchtest, dass Elemente auf der Seite gleichmäßig angeordnet sind. 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;
justify-content: space-around; /* Space items evenly */
align-items: center;
height: 100vh;
}
.item {
flex: 1; /* Share the space equally */
margin: 10px;
background-color: lightgreen;
}