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

Generator CSS Flexbox

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

Postavitev flexbox ima dva ločena pravilnika – lastnosti vsebnika (flex-direction, justify-content, align-items, flex-wrap, gap) in lastnosti vsakega podrejenega elementa (flex-grow, flex-shrink, flex-basis) – in njuno mešanje je najpogostejši vir napak »zakaj to centriranje/rastenje/ovijanje ni tako, kot pričakujem«. Ta generator postavi oba pravilnika na zaslon hkrati: spremenite kateri koli kontrolnik vsebnika ali lastna polja katerega koli otroka in tri oštevilčena, barvno kodirana polja se takoj posodobijo, tako da vzrok in posledica ostaneta vidna.

Stran vsebnika pokriva vse osi postavitve: izberite smer, izberite, kako so otroci porazdeljeni vzdolž glavne osi z poravnano vsebino, jih poravnajte na prečni osi, odločite se, ali se previjejo na nove vrstice, in nastavite vrzel namesto robov med njimi. Podrejena stran je prav tako resnična: dodajte polja do osem, odstranite navzdol do dveh in dajte kateremu koli od njih lastno flex-grow, flex-shrink in flex-basis — generator natisne samo pravilo CSS za vsakega otroka, če se vsaj eno od teh razlikuje od privzetega v brskalniku, tako da se kopirana koda nikoli ne doda s flex-grow: 0 na polja, ki tega ne potrebujejo.

Prednastavljene strani skočijo naravnost na postavitve, ki jih ljudje dejansko iščejo po imenu: kako centrirati div (edino najpogosteje zastavljeno vprašanje postavitve CSS, rešeno z justify-content in align-items, oba nastavljena na sredino), logotip-leve povezave-desna navbar, enako široki prilagodljivi stolpci prek flex-grow in vzporedna primerjava presledkov med in bližnjimi sorodniki prostor okoli in prostorsko enakomerno.

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

🛡️
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.