⭐ 0
🔍
Tekst Slika PDF i dokumenti Audio Glazba Elektronika Vrijeme Komunalije Validatori Ezoterija Igre

CSS Flexbox navigacijska traka — logotip lijevo, veze desno

Izgradite CSS flexbox raspored vizualno: flex-direction, justify-content, align-items, flex-wrap i gap na spremniku, plus flex-grow, flex-shrink i flex-basis po djetetu, sve s pregledom uživo i CSS-om koji se može kopirati.

Obrada... 0%

Rezultat

Ova stranica otvara flexbox generator unaprijed postavljen na klasični raspored navigacijske trake: justify-content postavljen na razmak između i align-items postavljen na središte. Stavite logotip u prvi okvir i red navigacijskih veza u posljednji (ili podijelite veze preko srednjih okvira) i spremnik flexboxa ih gura na suprotne krajeve trake dok sve stavke drže poredane na istom okomitom središtu, bez obzira koliko su visoki logotip ili tekst veze.

razmak između je ono što ovo čini funkcionirajućim: pričvršćuje prvo dijete na početni rub, a zadnje dijete na krajnji rub, zatim raspoređuje sve preostale potomke ravnomjerno između njih — upravo oblik lijevog logotipa, desne veze koji koristi gotovo svako zaglavlje web-mjesta. align-items: center tada rješava okomito poravnanje za koje su prije bili potrebni hakovi s visinom linije ili trikovi s prikazom ćelija tablice.

Prilagodite broj djece tako da odgovara vašoj stvarnoj navigacijskoj traci — dva okvira za goli logotip i CTA traku, više za logotip plus nekoliko poveznica — i gledajte kako se izgled prilagođava uživo. Kopirajte CSS blok kada se podudara s vašim zaglavljem ili otvorite razmak između unaprijed postavljenih ako želite vidjeti to jedno svojstvo u usporedbi s njegovim bliskim srodnicima.

🛡️
Izvršeno u pregledniku

Vaše datoteke i unosi nikada ne napuštaju ovaj uređaj. Obrada se odvija potpuno offline. 100% siguran.

Prihvaćeni formati i pravila

  • Kontrole spremnika: flex-direction, justify-content, align-items, flex-wrap i unos razmaka u pikselima, primijenjen uživo na pregled.
  • Tri podređena okvira označena bojama prema zadanim postavkama (dodajte do osam, uklonite do dva), svaki sa svojim vlastitim poljima flex-grow, flex-shrink i flex-basis.
  • CSS blok koji se može kopirati s pravilom .flex-container plus jednim pravilom .flex-item-N po podređenom pravilu koje ima svojstva fleksibilnosti koja nisu zadana.

Ključne prednosti

✓ Svaka kontrola spremnika i flex-grow, flex-shrink i flex-basis svakog djeteta ažuriraju tri numerirana okvira za pregled uživo, tako da točno vidite što rade vaša pravila flexboxa prije nego što dodirnete tablicu stilova.
✓ Generator ispisuje samo podređena pravila koja se zapravo razlikuju od zadanih CSS postavki, tako da kopirani kod ostaje kratak i čitljiv umjesto ponovnog postavljanja flex-grow: 0 na svaki okvir.
✓ Unaprijed postavljene stranice rješavaju izglede koje ljudi traže prema nazivu: centriranje diva, logotip-lijeva veza-desna navigacijska traka i fleksibilni stupci jednake širine — otvorite jedan i alat je već konfiguriran.

Slučajevi upotrebe

  • • Nabavite točan CSS za centriranje diva vodoravno i okomito gledajući kako justify-content i align-items rade na okvirima za pregled uživo.
  • • Izradite izgled navigacijske trake s logotipom lijevo, veze desno s razmakom između i poravnanjem stavki: središte, a zatim kopirajte CSS spremnika ravno u svoju komponentu zaglavlja.
  • • Usporedite razmak između, razmak oko i ravnomjeran razmak jedan pored drugog na iste tri kutije umjesto da pogađate koja odgovara razmaku koji želite.