Geteilte Navigation

Ein gewöhnliches Navigationsmuster besteht darin, ein Element von den anderen wegzuschieben. Wir können Flexbox verwenden, um dies zu erreichen, ohne dass die beiden Sätze von Elementen in zwei separate Flex-Container aufgeteilt werden müssen.

Dieses Muster kombiniert automatische Ränder mit Flexbox, um die Elemente zu trennen.

Ein automatischer Rand nimmt allen verfügbaren Raum in der Richtung auf, in der er angewendet wird. So funktioniert das Zentrieren eines Blocks mit automatischen Rändern – Sie haben einen Rand auf jeder Seite des Blocks, der versucht, allen Platz einzunehmen, und dadurch den Block in die Mitte schiebt.

In diesem Fall nimmt der linke automatische Rand jeden verfügbaren Raum ein und schiebt das Element nach rechts. Sie könnten die Klasse push auf jedes Element in der Liste anwenden.

• CSS flexible Box-Layout Modul
• display Eigenschaft
• margin Eigenschaft