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

Generator CSS Flexbox

Vizualno zgradi postavitev CSS flexbox: flex-direction, justify-content, align-items, flex-wrap in gap na vsebniku ter flex-grow, flex-shrink in flex-basis za vsakega otroka, vse s predogledom v živo in CSS-jem, pripravljenim za kopiranje.

🔒 V celoti obdelano v vašem brskalniku – nič, kar tukaj vnesete, ni nikoli naloženo.

Obdelava ... 0%

Rezultat

Postavitev flexbox ima dva ločena nabora pravil – lastnosti na vsebniku (flex-direction, justify-content, align-items, flex-wrap, gap) in lastnosti na vsakem otroku (flex-grow, flex-shrink, flex-basis) – in njuno mešanje je najpogostejši vir napak »zakaj se to ne centrira / ne raste / ne prelamlja, kot pričakujem«. Ta generator prikaže oba nabora pravil hkrati na zaslonu: spremeni kateri koli nadzor vsebnika ali lastna polja katerega koli otroka in tri oštevilčena, barvno označena polja se takoj posodobijo, tako da sta vzrok in posledica vidna.

Stran vsebnika pokriva vse osi postavitve: izberi smer, izberi, kako so otroci razporejeni vzdolž glavne osi z justify-content, poravnaj jih na prečni osi, odloči se, ali se prelamljajo v nove vrstice, in nastavi razmik namesto trikov z robovi med njimi. Stran otroka je prav tako resnična: dodaj polja do osem, odstrani jih do dve in kateremu koli od njih dodeli lastne flex-grow, flex-shrink in flex-basis – generator izpiše pravilo CSS za otroka samo, če se vsaj ena od teh vrednosti razlikuje od privzete vrednosti brskalnika, zato se kopirana koda nikoli ne napihuje s flex-grow: 0 na poljih, ki tega ne potrebujejo.

Prednastavljene strani skočijo naravnost na postavitve, ki jih ljudje dejansko iščejo po imenu: kako centrirati div (najpogosteje zastavljeno vprašanje o postavitvi CSS, rešeno tako, da sta justify-content in align-items nastavljena na center), navigacijska vrstica z logotipom levo in povezavami desno, enako široki prilagodljivi stolpci prek flex-grow in vzporedna primerjava space-between z njegovimi bližnjimi sorodnicami space-around in space-evenly.

Kot vsako orodje na tem spletnem mestu je tudi generator brezplačen in v celoti deluje v tvojem brskalniku: ni nalaganja, ni računa, deluje pa tudi brez povezave, ko se stran naloži.

Uživate v tem orodju? Se vam zdi izdelek uporaben? Vidite v njem potencial in ga želite podpreti?

🛡️
Izvaja se v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka povsem brez povezave. 100-odstotno varno.

Sprejeti formati in pravila

  • Nadzor vsebnika: flex-direction, justify-content, align-items, flex-wrap in vnos za gap v slikovnih pikah, ki se v živo odraža na predogledu.
  • Privzeto tri barvno označena otroška polja (dodaš jih lahko do osem, odstraniš pa do dve), vsako s svojimi polji za flex-grow, flex-shrink in flex-basis.
  • Kopirni blok CSS s pravilom .flex-container ter po enim pravilom .flex-item-N za vsakega otroka, ki ima neprivzete lastnosti flex.

Ključne prednosti

✓ Vsak nadzor vsebnika in vsak flex-grow, flex-shrink ter flex-basis posameznega otroka se v živo odraža na treh oštevilčenih predoglednih poljih, tako da natanko vidiš, kaj pravila flexboxa naredijo, še preden se dotakneš slogovne predloge.
✓ Generator izpiše samo tista pravila za otroke, ki se dejansko razlikujejo od privzetih vrednosti CSS, zato kopirana koda ostane kratka in berljiva, namesto da bi na vsakem polju ponavljala flex-grow: 0.
✓ Prednastavljene strani rešujejo postavitve, ki jih ljudje iščejo po imenu: centriranje diva, navigacijska vrstica z logotipom levo in povezavami desno ter enako široki prilagodljivi stolpci – odpri eno in orodje je že nastavljeno.

Primeri uporabe

  • • Pridobite natančen CSS za središčenje elementa div v vodoravni in navpični smeri tako, da opazujete delovanje lastnosti justify-content in align-items na prikazu v živo.
  • • Zgradite postavitev navigacijske vrstice z logotipom na levi in povezavami na desni z uporabo space-between in align-items: center, nato pa CSS vsebnika kopirajte neposredno v svojo komponento glave.
  • • Primerjajte space-between, space-around in space-evenly enega ob drugem na istih treh poljih, namesto da ugibate, kateri ustreza želenemu razmiku.