⭐ 0
🔍
Besedilo Slika PDF in dokumenti Avdio Glasba elektronika Čas Pripomočki Validatorji Ezoterika igre

Navbar CSS Flexbox — logotip levo, povezave desno

Vizualno zgradite postavitev CSS flexbox: flex-direction, justify-content, align-items, flex-wrap in vrzel na vsebniku ter flex-grow, flex-shrink in flex-basis na otroka, vse s predogledom v živo in CSS-jem, ki ga je mogoče kopirati.

Obdelava ... 0%

Rezultat

Ta stran odpre prednastavitev generatorja flexbox na klasično postavitev navbara: justify-content nastavljen na presledek med in align-items nastavljen na sredino. Postavite logotip v prvo polje in vrsto nav povezav v zadnje (ali razdelite povezave čez srednja polja) in vsebnik flexbox jih potisne na nasprotna konca vrstice, pri tem pa ohranja vse elemente poravnane na istem navpičnem središču, ne glede na to, kako visok je logotip ali besedilo povezave.

presledek med njimi je tisto, zaradi česar to deluje: prvega podrejenega elementa pripne na začetni rob in zadnjega podrejenega elementa na končni rob, nato pa vse preostale podrejene elemente enakomerno porazdeli mednje – natanko tako, kot je levi logotip, desna povezava, ki jo uporablja skoraj vsaka glava spletnega mesta. align-items: center nato reši navpično poravnavo, ki je prej zahtevala vdore višine črte ali trike prikaza celice tabele.

Prilagodite število podrejenih elementov, da se ujema z vašo pravo vrstico za krmarjenje – dve polji za goli logotip in vrstico CTA, več za logotip in več povezav – in opazujte, kako se postavitev prilagaja v živo. Kopirajte blok CSS, ko se ujema z vašo glavo, ali odprite prednastavitev presledka med, če želite videti to lastnost v primerjavi z njenimi bližnjimi sorodniki.

🛡️
Izvedeno v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka popolnoma brez povezave. 100 % varno.

Sprejeti formati in pravila

  • Kontrolniki vsebnika: flex-direction, justify-content, align-items, flex-wrap in vnos vrzeli v slikovnih pikah, uporabljen v živo za predogled.
  • Privzeto trije barvno kodirani podrejeni okvirji (dodajte do osem, odstranite do dva), vsako s svojimi polji flex-grow, flex-shrink in flex-basis.
  • Blok CSS, ki ga je mogoče kopirati, s pravilom .flex-container in enim pravilom .flex-item-N na podrejenega elementa, ki ima lastnosti flex, ki niso privzete.

Ključne prednosti

✓ Vsak kontrolnik vsebnika in flex-grow, flex-shrink in flex-basis vsakega otroka posodabljajo tri oštevilčena polja za predogled v živo, tako da natančno vidite, kaj počnejo vaša pravila flexboxa, preden se dotaknete tabele slogov.
✓ Generator natisne le podrejena pravila, ki se dejansko razlikujejo od privzetih nastavitev CSS, tako da ostane kopirana koda kratka in berljiva, namesto da bi ponovno navedel flex-grow: 0 na vsakem polju.
✓ Prednastavljene strani rešujejo postavitve, ki jih ljudje iščejo po imenu: centriranje diva, logotip-leve povezave-desna vrstica za krmarjenje in prilagodljivi stolpci enake širine – odprite eno in orodje je že konfigurirano.

Primeri uporabe

  • • Pridobite natančen CSS za centriranje div tako vodoravno kot navpično, tako da opazujete delo poravnave vsebine in poravnave elementov na poljih za predogled v živo.
  • • Zgradite postavitev vrstice za krmarjenje z logotipom levo in povezavo desno s presledkom med in align-items: center, nato kopirajte CSS vsebnika naravnost v komponento glave.
  • • Primerjajte razmik med, razmik okoli in enakomerno razmik enega poleg drugega na istih treh poljih, namesto da ugibate, kateri se ujema z želenim razmikom.