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

CSS Flexbox Generator

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

Izgled flexboxa ima dva odvojena pravilnika — svojstva na spremniku (flex-direction, justify-content, align-items, flex-wrap, gap) i svojstva na svakom djetetu (flex-grow, flex-shrink, flex-basis) — a njihovo miješanje najčešći je izvor grešaka "zašto ovo centriranje/rast/prematanje nije onako kako ja očekujem". Ovaj generator stavlja oba pravilnika na zaslon odjednom: promijenite bilo koju kontrolu spremnika ili vlastita polja bilo kojeg djeteta i tri numerirana polja označena bojama ažuriraju se odmah, tako da uzrok i posljedica ostaju vidljivi.

Strana spremnika pokriva svaku os rasporeda: odaberite smjer, odaberite kako će djeca biti raspoređena duž glavne osi s justify-content-om, poravnajte ih na poprečnu os, odlučite hoće li se prelamati na nove retke i postavite razmak umjesto hakova margina između njih. Podređena strana je jednako stvarna: dodajte okvire do osam, uklonite do dva i dajte bilo kojem od njih vlastiti flex-grow, flex-shrink i flex-basis — generator samo ispisuje CSS pravilo po djetetu kada se barem jedno od njih razlikuje od zadanog u pregledniku, tako da se kopirani kod nikada ne dodaje s flex-grow: 0 na okvire kojima to nije potrebno.

Unaprijed postavljene stranice skaču ravno na rasporede koje ljudi zapravo traže prema nazivu: kako centrirati div (najčešće postavljano pitanje o CSS izgledu, rješava se pomoću justify-content i align-items postavljenih na središte), logo-lijeva veza-desna navigacijska traka, fleksibilni stupci jednake širine putem flex-growa i usporedna usporedba razmaka između naspram bliskih srodnika razmaka oko i prostorno ravnomjerno.

Kao i svaki alat na ovoj stranici, generator je besplatan i radi u potpunosti u vašem pregledniku: nema prijenosa, nema računa, i nastavlja raditi izvan mreže nakon što se stranica učita.

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