⭐ 0
🔍
Szöveg Kép PDF és Dokumentumok Hang Zene Elektronika Idő Segédprogramok Validátorok Ezotéria Játékok

CSS Flexbox Generátor

Készíts CSS flexbox elrendezést vizuálisan: flex-direction, justify-content, align-items, flex-wrap és gap a tárolón, valamint gyermekenként flex-grow, flex-shrink és flex-basis, mindez élő előnézettel és másolható CSS-sel.

🔒 Teljesen a böngészőjében dolgozzák fel – soha semmi, amit itt beírt, nem kerül feltöltésre.

Feldolgozás... 0%

Eredmény

Egy flexbox elrendezésnek két külön szabályrendszere van – a tárolóra vonatkozó tulajdonságok (flex-direction, justify-content, align-items, flex-wrap, gap) és minden gyermekre vonatkozó tulajdonságok (flex-grow, flex-shrink, flex-basis) – és ezek összekeverése a leggyakoribb forrása a „miért nem középre/ nagyobbra/ sortörésre kerül, ahogy várom” hibáknak. Ez a generátor mindkét szabályrendszert egyszerre mutatja a képernyőn: változtass bármilyen tárolóvezérlőt vagy bármely gyermek saját mezőjét, és három számozott, színkódolt doboz azonnal frissül, így az ok és okozat látható marad.

A tárolóoldal minden elrendezési tengelyt lefed: válassz irányt, döntsd el, hogyan oszlanak el a gyermekek a főtengely mentén a justify-content segítségével, igazítsd őket a kereszttengelyen, határozd meg, hogy sortörjenek-e új sorokba, és állíts be gap-et margó trükkök helyett közöttük. A gyermekoldal ugyanolyan valós: adj hozzá dobozokat maximum nyolcig, csökkentsd minimum kettőig, és bármelyiküknek adj saját flex-grow, flex-shrink és flex-basis értéket – a generátor csak akkor ír ki gyermekenkénti CSS szabályt, ha legalább az egyik eltér a böngésző alapértelmezésétől, így a másolt kód soha nem hízik fel felesleges flex-grow: 0-okkal olyan dobozokon, amelyeknek nincs rájuk szükségük.

Az előre beállított oldalak egyenesen azokra az elrendezésekre ugranak, amelyekre az emberek név szerint keresnek: hogyan igazítsunk középre egy divet (a leggyakrabban feltett CSS elrendezési kérdés, megoldva a justify-content és align-items együttes centerre állításával), logó balra, linkek jobbra navigációs sáv, egyenlő szélességű rugalmas oszlopok flex-grow-val, valamint a space-between, a space-around és a space-evenly egymás melletti összehasonlítása.

Mint az oldal minden eszköze, ez a generátor is ingyenes és teljes egészében a böngésződben fut: nincs feltöltés, nincs fiók, és az oldal betöltése után internetkapcsolat nélkül is tovább működik.

Élvezed ezt az eszközt? Hasznosnak találod ezt a terméket? Látsz benne lehetőséget, és szeretnéd támogatni?

🛡️
Böngészőben futtatva

A fájljaid és beviteleid soha nem hagyják el ezt az eszközt. A feldolgozás teljesen offline történik. 100%-ban biztonságos.

Elfogadott formátumok és szabályok

  • Tárolóvezérlők: flex-direction, justify-content, align-items, flex-wrap és gap beviteli mező pixelben, az előnézet élőben követi a változásokat.
  • Alapértelmezetten három színkódolt gyermekdoboz (maximum nyolcra bővíthető, minimum kettőre csökkenthető), mindegyik saját flex-grow, flex-shrink és flex-basis mezővel.
  • Másolható CSS blokk egy .flex-container szabállyal, valamint minden olyan gyermekhez egy .flex-item-N szabállyal, amelynek nem alapértelmezett flex tulajdonságai vannak.

Fő előnyök

✓ Minden tárolóvezérlő és minden gyermekelem flex-grow, flex-shrink és flex-basis értéke élőben frissíti a három számozott előnézeti dobozt, így pontosan látod, mit csinálnak a flexbox-szabályaid, mielőtt a stíluslaphoz nyúlnál.
✓ A generátor csak azokat a gyermekszabályokat írja ki, amelyek ténylegesen eltérnek a CSS alapértelmezésektől, így a másolt kód rövid és olvasható marad ahelyett, hogy minden doboznál kiírná a flex-grow: 0-t.
✓ Az előre beállított oldalak név szerint oldják meg a keresett elrendezéseket: div középre igazítása, logó balra, linkek jobbra navigációs sáv és egyenlő szélességű rugalmas oszlopok – nyisd meg valamelyiket, és az eszköz máris be van állítva.

Felhasználási esetek

  • • Készítse el a pontos CSS-t, amellyel egy divet vízszintesen és függőlegesen is középre igazíthat – figyelje, hogyan működik a justify-content és az align-items az élő előnézeti dobozokon.
  • • Hozzon létre egy logó balra, linkek jobbra navigációs sáv elrendezést a space-between és az align-items: center segítségével, majd másolja a konténer CSS-ét egyenesen a header komponensébe.
  • • Hasonlítsa össze a space-between, space-around és space-evenly értékeket egymás mellett, ugyanazon a három dobozon, ahelyett, hogy találgatná, melyik adja vissza az Ön által kívánt térközt.