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

CSS Flexbox Generator

Vizualno izgradite CSS flexbox raspored: flex-direction, justify-content, align-items, flex-wrap i gap na spremniku, plus flex-grow, flex-shrink i flex-basis za svaki podređeni element, sve s pregledom uživo i CSS-om koji možete kopirati.

🔒 U potpunosti se obrađuje u vašem pregledniku — ništa što ovdje unesete nikada se ne učitava.

Obrada... 0%

Rezultat

Flexbox raspored ima dva odvojena pravilnika — svojstva na spremniku (flex-direction, justify-content, align-items, flex-wrap, gap) i svojstva na svakom podređenom elementu (flex-grow, flex-shrink, flex-basis) — i njihovo miješanje je najčešći izvor bugova tipa "zašto se ovo ne centrira / ne raste / ne prelama onako kako očekujem". Ovaj generator stavlja oba pravilnika na ekran odjednom: promijenite bilo koju kontrolu spremnika ili bilo koja polja podređenog elementa i tri numerirana okvira označena bojom odmah se ažuriraju, tako da uzrok i posljedica ostaju vidljivi.

Strana spremnika pokriva svaku os rasporeda: odaberite smjer, odaberite kako su podređeni elementi raspoređeni duž glavne osi s justify-content, poravnajte ih na poprečnoj osi, odlučite hoće li se prelamati u nove retke i postavite gap umjesto hakova s marginama između njih. Strana podređenog elementa 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 ispisuje CSS pravilo po podređenom elementu samo kada se barem jedno od njih razlikuje od zadanog u pregledniku, tako da kopirani kod nikada ne napuhuje sebe s flex-grow: 0 na okvirima kojima to ne treba.

Predlošci stranica odmah skaču na rasporede koje ljudi zapravo traže po imenu: kako centrirati div (najčešće postavljano pitanje o CSS rasporedu, riješeno s justify-content i align-items oboje postavljeni na center), navigacijska traka s logom lijevo i poveznicama desno, fleksibilni stupci jednake širine putem flex-growa i usporedba rame uz rame space-betweena s njegovim bliskim rođacima space-around i space-evenly.

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

Uživate u ovom alatu? Mislite da je ovaj proizvod koristan? Vidite potencijal u njemu i želite ga podržati?

🛡️
Izvršava se u pregledniku

Vaše datoteke i unosi nikad ne napuštaju ovaj uređaj. Obrada se odvija potpuno izvan mreže. 100% sigurno.

Prihvaćeni formati i pravila

  • Kontrole spremnika: flex-direction, justify-content, align-items, flex-wrap i unos gap-a u pikselima, primijenjene uživo na pregled.
  • Tri podređena okvira označena bojom prema zadanim postavkama (dodajte do osam, uklonite do dva), svaki sa svojim poljima za flex-grow, flex-shrink i flex-basis.
  • Kopirajući CSS blok s pravilom .flex-container plus jednim .flex-item-N pravilom za svaki podređeni element koji ima ne-zadane flex osobine.

Ključne prednosti

✓ Svaka kontrola spremnika te flex-grow, flex-shrink i flex-basis svakog podređenog elementa ažuriraju tri numerirana okvira za pregled uživo, tako da točno vidite što vaša flexbox pravila rade prije nego što dotaknete stylesheet.
✓ Generator ispisuje samo pravila za podređene elemente koja se zapravo razlikuju od CSS zadanih vrijednosti, tako da kopirani kod ostaje kratak i čitljiv umjesto da ponavlja flex-grow: 0 na svakom okviru.
✓ Predlošci stranica rješavaju rasporede koje ljudi traže po imenu: centriranje diva, navigacijska traka s logom lijevo i poveznicama desno te fleksibilni stupci jednake širine — otvorite jedan i alat je već konfiguriran.

Slučajevi upotrebe

  • • Dobijte točan CSS kôd za centriranje diva vodoravno i okomito tako što ćete u stvarnom vremenu promatrati kako justify-content i align-items djeluju na preglednim okvirima.
  • • Izradite navigacijsku traku s logom lijevo i poveznicama desno pomoću space-between i align-items: center, a zatim kopirajte CSS kontejnera izravno u svoju header komponentu.
  • • Usporedite space-between, space-around i space-evenly jedan pored drugog na ista tri okvira umjesto da pogađate koji odgovara željenom razmaku.