⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

CSS Flexbox Navbar — Logo venstre, linker til høyre

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

Behandler... 0%

Resultat

Denne siden åpner forhåndsinnstillingen for flexbox-generatoren til den klassiske navbar-oppsettet: justify-content satt til space-between og align-items satt til center. Plasser en logo i den første boksen og en rad med nav-lenker i den siste (eller del lenkene på tvers av de midterste boksene) og flexbox-beholderen skyver dem til motsatte ender av linjen mens du holder hvert element stilt opp på samme vertikale senter, uansett hvor høy logoen eller lenketeksten er.

space-between er det som får dette til å fungere: det fester det første barnet til startkanten og det siste barnet til sluttkanten, og sprer deretter eventuelle gjenværende barn jevnt mellom dem - nøyaktig venstre-logoen, høyre-lenkene former nesten hver sideoverskrift som brukes. align-items: center løser deretter den vertikale justeringen som pleide å trenge linjehøyde-hack eller tabellcellevisningstriks.

Juster antall barn for å matche den virkelige navigasjonslinjen – to bokser for en bar logo-og-CTA-linje, mer for logo pluss flere lenker – og se oppsettet tilpasse seg live. Kopier CSS-blokken når den samsvarer med overskriften din, eller åpne mellomrommet mellom forhåndsinnstillingen hvis du vil se den ene egenskapen sammenlignet med dens nære slektninger.

🛡️
Utført i nettleser

Filene og inngangene dine forlater aldri denne enheten. Behandlingen kjører helt offline. 100 % sikker.

Godkjente formater og regler

  • Beholderkontroller: flex-direction, justify-content, align-items, flex-wrap og en gap-inngang i piksler, brukt live på forhåndsvisningen.
  • Tre fargekodede barnebokser som standard (legg til opptil åtte, fjern ned til to), hver med sine egne felt for flex-grow, flex-shrink og flex-basis.
  • Kopierbar CSS-blokk med en .flex-container-regel pluss én .flex-item-N-regel per barn som har ikke-standard flex-egenskaper.

Viktige fordeler

✓ Hver beholderkontroll og hvert barns flex-grow, flex-shrink og flex-basis oppdaterer tre nummererte forhåndsvisningsbokser live, slik at du ser nøyaktig hva flexbox-reglene dine gjør før du berører et stilark.
✓ Generatoren skriver bare ut underordnede regler som faktisk avviker fra CSS-standardene, så den kopierte koden forblir kort og lesbar i stedet for å gjenta flex-grow: 0 på hver boks.
✓ Forhåndsinnstilte sider løser oppsettene folk søker etter ved navn: sentrering av en div, en logo-venstre lenker-høyre navigasjonslinje og fleksible kolonner med lik bredde – åpne en og verktøyet er allerede konfigurert.

Brukssaker

  • • Få den nøyaktige CSS-en for å sentrere en div både horisontalt og vertikalt ved å se justify-content og align-elementer arbeide på live forhåndsvisningsbokser.
  • • Bygg en logo-venstre, lenker-høyre navigasjonslinje-layout med mellomrom-mellom og juster-elementer: senter, og kopier deretter beholderens CSS rett inn i overskriftskomponenten.
  • • Sammenlign mellomrom, mellomrom rundt og jevnt mellomrom side om side på de samme tre boksene i stedet for å gjette hvilken som samsvarer med avstanden du ønsker.