⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

CSS Flexbox Navbar — Logo til venstre, links til højre

Byg et CSS flexbox-layout visuelt: flex-direction, justify-content, align-items, flex-wrap og gap på containeren, plus per-child flex-grow, flex-shrink og flex-basis, alt sammen med en live forhåndsvisning og kopierbar CSS.

Behandler... 0%

Resultat

Denne side åbner flexbox-generatorens forudindstilling til det klassiske navbar-layout: justify-content sat til space-between og align-items sat til center. Sæt et logo i den første boks og en række af nav-links i den sidste (eller del linkene på tværs af de midterste felter), og flexbox-beholderen skubber dem til modsatte ender af bjælken, mens du holder hvert emne linet op på det samme lodrette center, uanset hvor højt logoet eller linkteksten er.

space-between er, hvad der får dette til at fungere: det fastgør det første barn til startkanten og det sidste barn til slutkanten, og fordeler derefter eventuelle resterende børn jævnt mellem dem - nøjagtigt venstre-logoet, højre-links former næsten alle sidehoveder, der bruges. align-items: center løser derefter den lodrette justering, der plejede at have brug for line-height hacks eller tabel-celle display tricks.

Juster antallet af børn, så det matcher din rigtige navbar - to kasser til et blottet logo-og-CTA-felt, mere for logo plus flere links - og se layoutet tilpasse sig live. Kopier CSS-blokken, når den matcher din header, eller åbn mellemrummet mellem forudindstillingen, hvis du vil se den ene egenskab sammenlignet med dens nære slægtninge.

🛡️
Udføres i browser

Dine filer og input forlader aldrig denne enhed. Behandlingen kører helt offline. 100 % sikker.

Accepterede formater og regler

  • Beholderkontroller: flex-direction, justify-content, align-items, flex-wrap og en gap-input i pixels, anvendt live på forhåndsvisningen.
  • Tre farvekodede underordnede bokse som standard (tilføj op til otte, fjern ned til to), hver med sine egne flex-grow, flex-shrink og flex-basis felter.
  • Kopierbar CSS-blok med en .flex-container-regel plus én .flex-item-N-regel pr. barn, der har ikke-standard flex-egenskaber.

Vigtige fordele

✓ Hver containerkontrol og ethvert barns flex-grow, flex-shrink og flex-basis opdaterer tre nummererede forhåndsvisningsbokse live, så du kan se præcis, hvad dine flexbox-regler gør, før du trykker på et stylesheet.
✓ Generatoren udskriver kun underordnede regler, der faktisk afviger fra CSS-standarderne, så den kopierede kode forbliver kort og læsbar i stedet for at gentage flex-grow: 0 på hver boks.
✓ Forudindstillede sider løser de layouts, folk søger efter ved navn: centrering af en div, en logo-venstre links-højre navigeringslinje og fleksible kolonner i samme bredde - åbn en, og værktøjet er allerede konfigureret.

Brug Cases

  • • Få den nøjagtige CSS til at centrere en div både vandret og lodret ved at se justify-content og align-items arbejde på live forhåndsvisningsbokse.
  • • Byg et logo-venstre, links-højre navbar-layout med mellemrum-mellem og align-elementer: centreret, og kopier derefter container-CSS direkte ind i din header-komponent.
  • • Sammenlign mellemrum-mellem, mellemrum-omkring og mellemrum-jævnt side om side på de samme tre kasser i stedet for at gætte, hvilken der matcher den mellemrum, du ønsker.