Flexbox ordnet Elemente in einer Reihe oder Spalte an. Auf dem Container: display: flex, flex-direction, justify-content (Hauptachse), align-items (Querachse), gap (Abstand), flex-wrap. Auf Kindern: flex: 1 lässt sie den Platz teilen.
Flexbox eignet sich perfekt für Navigationsleisten, Kartenreihen und das Zentrieren von Inhalten.
.leiste {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.mitte {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.spalte { flex: 1; }Merke
display: flexam Containerjustify-content(Hauptachse),align-items(Querachse)gapfür Abstände
Aufgabe
Baue eine Navigationsleiste mit Logo links und Links rechts.