⭐ 0
🔍
Text Imagine PDF și Documente Audio Muzică Electronică Timp Utilitare Validatoare Ezoterism Jocuri

CSS Flexbox Navbar — Logo Stânga, Linkuri Dreapta

Creați vizual un aspect CSS flexbox: flex-direction, justificare-conținut, aliniere-articole, flex-wrap și decalaj pe container, plus flex-grow per copil, flex-shrink și flex-basis, toate cu o previzualizare live și CSS copiabil.

Procesare... 0%

Rezultat

Această pagină deschide generatorul flexbox presetat la aspectul clasic al barei de navigare: justify-content setat la spațiu între și align-elements setat la centru. Puneți o siglă în prima casetă și un rând de legături de navigare în ultima (sau împărțiți legăturile în casetele din mijloc) și containerul flexbox le împinge la capetele opuse ale barei, menținând în același timp fiecare articol aliniat pe același centru vertical, indiferent cât de înalt este sigla sau textul linkului.

spațiu-între este ceea ce face ca acest lucru să funcționeze: fixează primul copil la marginea de început și ultimul copil la marginea finală, apoi împrăștie orice copii rămași în mod egal între ei - exact logo-ul din stânga, link-urile din dreapta formează aproape fiecare antet de site utilizat. align-items: center apoi rezolvă alinierea verticală care obișnuia avea nevoie de hack-uri de înălțime de linie sau trucuri de afișare a celulelor de masă.

Ajustați numărul de copii pentru a se potrivi cu adevărata dvs. bară de navigare — două casete pentru o bară de logo-uri și CTA, mai multe pentru logo, plus mai multe linkuri — și urmăriți modul în care se adaptează în direct. Copiați blocul CSS odată ce se potrivește cu antetul dvs. sau deschideți spațiul dintre presetarea dacă doriți să vedeți acea proprietate în comparație cu rudele ei apropiate.

🛡️
Rulat în browser

Fișierele și datele introduse nu părăsesc niciodată acest dispozitiv. Procesarea rulează complet offline. 100% sigur.

Formate și reguli acceptate

  • Controale pentru container: direcție flexibilă, conținut justificat, aliniere a elementelor, înfășurare flexibilă și o introducere a decalajului în pixeli, aplicată în direct previzualizării.
  • În mod implicit, trei casete copil codificate cu culori (adăugați până la opt, eliminați până la două), fiecare cu propriile câmpuri flex-grow, flex-shrink și flex-basis.
  • Bloc CSS copiabil cu o regulă .flex-container plus o regulă .flex-item-N per copil care are proprietăți flexibile care nu sunt implicite.

Beneficii cheie

✓ Fiecare control container și flex-grow, flex-shrink și flex-base ale fiecărui copil actualizează trei casete de previzualizare numerotate, astfel încât să vedeți exact ce fac regulile dumneavoastră flexbox înainte de a atinge o foaie de stil.
✓ Generatorul tipărește doar reguli copil care diferă de fapt de valorile implicite CSS, astfel încât codul copiat rămâne scurt și lizibil în loc să reintroducă flex-grow: 0 pe fiecare casetă.
✓ Paginile prestabilite rezolvă aspectele pe care oamenii le caută după nume: centrarea unui div, un logo-legături din stânga-bara de navigare din dreapta și coloane flexibile cu lățime egală - deschideți unul și instrumentul este deja configurat.

Cazuri de utilizare

  • • Obțineți CSS exact pentru a centra un div atât pe orizontală, cât și pe verticală, urmărind conținutul justificat și elementele de aliniere lucrând în casetele de previzualizare live.
  • • Creați un aspect al barei de navigare cu logo-stânga, linkuri-dreapta cu spațiu între și elemente de aliniere: centrați, apoi copiați containerul CSS direct în componenta antet.
  • • Comparați spațiul dintre, spațiul în jur și spațiul uniform unul lângă altul pe aceleași trei casete, în loc să ghiciți care dintre ele se potrivește cu distanța dorită.