Flexbox bietet eine flexiblere Methode zur Steuerung des Platzierens, Vergrößern und Verkleinern von Elementen im Vergleich zu den traditionellen Floats. Flexbox ist besonders nützlich für die Erstellung von responsiven Designelementen, da es sich gut um die Positionierung mehrerer Elemente anpassen lässt. Hier ein einfaches Beispiel, wie du eine Flexbox verwenden kannst:
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
border: 1px solid #000;
padding: 10px;
}
.flex-item {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
}