Flexbox ist eine CSS-Layout-Methode, die es uns ermöglicht, flexibel mit Elementen umzugehen, die in einer Reihe oder einer Reihe von Reihen angeordnet sind. Sie ist besonders nützlich, wenn der Platz oder die Anordnung von Elementen sich ändern muss, z.B. auf verschiedenen Bildschirmgrößen. Flexbox arbeitet mit einem Container, in dem die Elemente als Kinder des Containers betrachtet werden. Es gibt mehrere Eigenschaften, die Sie verwenden können, um die Anordnung und die Größe der Elemente im Flexbox-Container zu steuern. Ein typisches Beispiel wäre das Layout eines Menüs, wo die Menüpunkte horizontal oder vertikal angeordnet werden können. Hier ist ein einfaches Beispiel, wie Sie Flexbox verwenden können:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column; /* Hier kann man auch 'row' wählen */
height: 300px;
border: 1px solid black;
}
.item {
background-color: lightblue;
margin: 5px;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>