⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

CSS Flexbox Navbar — Logotyp vänster, länkar höger

Bygg en CSS-flexbox-layout visuellt: flex-direction, justify-content, align-items, flex-wrap och gap på behållaren, plus per-child flex-grow, flex-shrink och flex-bas, allt med en liveförhandsvisning och kopierbar CSS.

Bearbetar... 0%

Resultat

Den här sidan öppnar flexbox-generatorns förinställning till den klassiska navbar-layouten: justera-innehåll inställt på mellanslag-mellan och justera-objekt inställt på centrerat. Sätt en logotyp i den första rutan och en rad med nav-länkar i den sista (eller dela länkarna över de mittersta rutorna) och flexbox-behållaren skjuter dem till motsatta ändar av fältet samtidigt som alla föremål är uppradade i samma vertikala mitt, oavsett hur hög logotypen eller länktexten är.

space-between är vad som gör att det här fungerar: det fäster det första barnet till startkanten och det sista barnet till slutkanten, och sprider sedan eventuella återstående barn jämnt mellan dem - exakt vänsterlogotypen, högerlänkarna formar nästan alla webbplatsrubriker som används. align-items: center löser sedan den vertikala justeringen som tidigare behövde radhöjdshack eller tabellcellsvisningstrick.

Justera antalet barn för att matcha din riktiga navbar - två rutor för en bar logotyp och CTA-fält, mer för logotyp plus flera länkar - och se layouten anpassa sig live. Kopiera CSS-blocket när det matchar din rubrik, eller öppna förinställningen mellanslag mellan om du vill se den ena egenskapen jämfört med dess nära släktingar.

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Behållarkontroller: flex-direction, justify-content, align-items, flex-wrap och en luckinmatning i pixlar, tillämpas live på förhandsgranskningen.
  • Tre färgkodade underordnade rutor som standard (lägg till upp till åtta, ta bort ner till två), var och en med sina egna flex-grow, flex-shrink och flex-bas.
  • Kopierbart CSS-block med en .flex-container-regel plus en .flex-item-N-regel per barn som har flexegenskaper som inte är standard.

Viktiga fördelar

✓ Varje containerkontroll och varje barns flex-grow, flex-shrink och flex-bas uppdaterar tre numrerade förhandsgranskningsrutor live, så att du ser exakt vad dina flexbox-regler gör innan du rör en stilmall.
✓ Generatorn skriver bara ut underordnade regler som faktiskt skiljer sig från CSS-standarderna, så den kopierade koden förblir kort och läsbar istället för att återställa flex-grow: 0 på varje ruta.
✓ Förinställda sidor löser layouterna som folk söker efter med namn: centrera en div, en logotyp-vänster länkar-höger navigeringsfält och lika breda flexibla kolumner – öppna en och verktyget är redan konfigurerat.

Användningsfall

  • • Skaffa exakt CSS för att centrera en div både horisontellt och vertikalt genom att se justify-content och align-items arbeta i liveförhandsgranskningsrutor.
  • • Bygg en logotyp-vänster, länk-höger navigeringsfältslayout med mellanslag-mellan och align-objekt: centrera, kopiera sedan behållarens CSS direkt in i din rubrikkomponent.
  • • Jämför mellanrum-mellan, mellanrum runt och mellanrum-jämnt sida vid sida på samma tre rutor istället för att gissa vilken som matchar avståndet du vill ha.