⭐ 0
🔍
Text Bild PDF & Dokumente Audio Musik Elektronik Zeit Dienstprogramme Validatoren Esoterik Spiele

CSS Flexbox Navbar – Logo links, Links rechts

Erstellen Sie visuell ein CSS-Flexbox-Layout: Flex-Direction, Justify-Content, Align-Items, Flex-Wrap und Lücke im Container sowie Flex-Grow, Flex-Shrink und Flex-Basis pro Kind, alles mit Live-Vorschau und kopierbarem CSS.

Verarbeitung... 0%

Ergebnis

Auf dieser Seite wird der Flexbox-Generator geöffnet, der auf das klassische Navigationsleistenlayout voreingestellt ist: „justify-content“ ist auf „space-between“ und „align-items“ auf „center“ eingestellt. Platzieren Sie ein Logo im ersten Feld und eine Reihe von Navigationslinks im letzten (oder teilen Sie die Links auf die mittleren Felder auf), und der Flexbox-Container verschiebt sie an die gegenüberliegenden Enden der Leiste, während alle Elemente in der gleichen vertikalen Mitte ausgerichtet bleiben, egal wie hoch das Logo oder der Linktext ist.

Space-Between ist es, was das funktioniert: Es fixiert das erste untergeordnete Element an der Startkante und das letzte untergeordnete Element an der Endkante und verteilt dann alle verbleibenden untergeordneten Elemente gleichmäßig zwischen ihnen – genau die Form von Links-Logo und Rechts-Links, die fast jeder Site-Header verwendet. align-items:center löst dann die vertikale Ausrichtung, die früher Hacks zur Zeilenhöhe oder Tricks zur Anzeige von Tabellenzellen erforderte.

Passen Sie die Anzahl der untergeordneten Elemente an Ihre tatsächliche Navigationsleiste an – zwei Felder für eine reine Logo- und CTA-Leiste, mehr für das Logo und mehrere Links – und beobachten Sie live, wie sich das Layout anpasst. Kopieren Sie den CSS-Block, sobald er mit Ihrem Header übereinstimmt, oder öffnen Sie die Voreinstellung „Leerzeichen dazwischen“, wenn Sie diese eine Eigenschaft mit ihren nahen Verwandten vergleichen möchten.

🛡️
Im Browser ausgeführt

Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.

Akzeptierte Formate & Regeln

  • Container-Steuerelemente: Flex-Richtung, Justify-Content, Align-Items, Flex-Wrap und eine Lückeneingabe in Pixel, die live auf die Vorschau angewendet wird.
  • Standardmäßig drei farblich gekennzeichnete untergeordnete Felder (bis zu acht hinzufügen, bis zu zwei entfernen), jedes mit seinen eigenen Flex-Grow-, Flex-Shrink- und Flex-Basis-Feldern.
  • Kopierbarer CSS-Block mit einer .flex-container-Regel plus einer .flex-item-N-Regel pro untergeordnetem Element, die nicht standardmäßige Flex-Eigenschaften aufweist.

Wichtigste Vorteile

✓ Jedes Container-Steuerelement und jedes untergeordnete Flex-Grow-, Flex-Shrink- und Flex-Basis-Update werden in drei nummerierten Vorschauboxen live aktualisiert, sodass Sie genau sehen können, was Ihre Flexbox-Regeln bewirken, bevor Sie ein Stylesheet berühren.
✓ Der Generator druckt nur untergeordnete Regeln, die tatsächlich von den CSS-Standardeinstellungen abweichen, sodass der kopierte Code kurz und lesbar bleibt, anstatt „flex-grow: 0“ in jedem Feld erneut anzugeben.
✓ Voreingestellte Seiten lösen die Layouts, nach denen Menschen namentlich suchen: Zentrieren eines Div, einer Logo-Links-Links-Rechts-Navigationsleiste und flexible Spalten gleicher Breite – öffnen Sie eine und das Tool ist bereits konfiguriert.

Anwendungsfälle

  • • Holen Sie sich das genaue CSS, um ein Div sowohl horizontal als auch vertikal zu zentrieren, indem Sie beobachten, wie justify-content und align-items in Live-Vorschaufeldern funktionieren.
  • • Erstellen Sie ein Navigationsleistenlayout mit Logo links und Links rechts mit „space-between“ und „align-items:center“ und kopieren Sie dann das Container-CSS direkt in Ihre Header-Komponente.
  • • Vergleichen Sie „space-between“, „space-around“ und „space-equally“ nebeneinander in denselben drei Kästchen, anstatt zu raten, welches dem gewünschten Abstand entspricht.