⭐ 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ítsen CSS flexbox elrendezést vizuálisan: flexibilis irány, tartalom igazítása, elemek igazítása, flexiós körítés és rés a tárolón, plusz gyermekenkénti flex-növekedés, flex-zsugorodás és hajlítási alap, mindez élő előnézettel és másolható CSS-sel.

Feldolgozás... 0%

Eredmény

A flexbox elrendezésnek két külön szabálykönyve van – a tároló tulajdonságai (hajlítási irány, igazoló tartalom, igazítási elemek, flex-wrap, gap) és minden gyermek tulajdonságai (flex-növekedés, flex-zsugorodás, flex-alap) – és ezek összekeverése a leggyakoribb forrása a „miért nem az általam elvárt központosítási/növekedési/csomagolási módra. Ez a generátor egyszerre helyezi képernyőre mindkét szabálykönyvet: módosítsa a konténervezérlőket 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 az okozat látható marad.

A konténer oldala minden elrendezési tengelyt lefed: válasszon egy irányt, válassza ki, hogy a gyerekek hogyan oszlanak el a főtengely mentén az igazítási tartalommal, igazítsa őket a kereszttengelyhez, döntse el, hogy új vonalakra törjenek-e, és a margók betörése helyett hézagot állítson be közöttük. A gyermek oldal ugyanolyan valódi: adjon hozzá legfeljebb nyolc dobozt, vegyen ki kettőt, és adja meg bármelyiknek saját rugalmas növekedését, flexiós zsugorítását és flexiós alapját – a generátor csak akkor nyomtat ki gyermekenkénti CSS-szabályt, ha ezek közül legalább egy eltér a böngésző alapértelmezésétől, így a másolt kód soha nem tölti be magát flex-grow-val: 0 azokon a dobozokon, amelyekre nincs szükség.

Az előre beállított oldalak közvetlenül azokra az elrendezésekre ugranak, amelyeket az emberek ténylegesen név szerint keresnek: hogyan lehet középre helyezni egy div-t (az egyetlen leggyakrabban feltett CSS-elrendezési kérdés, amelyet mind a justify-content, mind az align-items középre állítanak), logó bal oldali hivatkozások jobb oldali navigációs sávja, egyenlő szélességű rugalmas oszlopok a flex-grow segítségével, valamint a szóköz és a szóköz egymás melletti összehasonlítása.

Mint minden eszköz ezen az oldalon, a generátor is ingyenes, és teljes egészében az Ön böngészőjében fut: nincs feltöltés, nincs fiók, és az oldal betöltése után offline állapotban is működik.

🛡️
Böngészőben futtatva

A fájljaid és bemeneteid soha nem hagyják el ezt az eszközt. A feldolgozás teljesen offline módon történik. 100% biztonságos.

Elfogadott formátumok és szabályok

  • Tárolóvezérlők: hajlítási irány, tartalom igazítása, elemek igazítása, rugalmas tördelése és résbevitel pixelekben, élőben alkalmazva az előnézetre.
  • Alapértelmezés szerint három színkódolt gyermekdoboz (maximum nyolc hozzáadása, kettő eltávolítása), mindegyik saját rugalmas növekedési, rugalmas zsugorítási és rugalmas alapú mezőkkel.
  • Másolható CSS-blokk .flex-container szabállyal és gyermekenként egy .flex-item-N szabállyal, amely nem alapértelmezett flex tulajdonságokkal rendelkezik.

Főbb előnyök

✓ Minden konténervezérlő, valamint minden gyermek rugalmas növekedése, flexibilis zsugorítása és flexiós alapja három számozott előnézeti mezőt frissít élőben, így pontosan láthatja, mit csinálnak a flexbox-szabályok, mielőtt megérintené a stíluslapot.
✓ A generátor csak olyan gyermekszabályokat nyomtat ki, amelyek ténylegesen eltérnek a CSS alapértelmezéseitől, így a másolt kód rövid és olvasható marad, ahelyett, hogy a flex-grow-t újraírná: 0 minden dobozon.
✓ Az előre beállított oldalak megoldják a név szerint keresett elrendezéseket: div középre helyezése, logó bal oldali hivatkozások jobb oldali navigációs sávja és azonos szélességű rugalmas oszlopok – nyissa meg az egyiket, és az eszköz már be van állítva.

Felhasználási területek

  • • Szerezze meg a pontos CSS-t, hogy vízszintesen és függőlegesen is középre állíthassa a div-t, és figyelje, ahogy az elemek sorkizárása és igazítása működik az élő előnézeti mezőkön.
  • • Hozzon létre egy logó bal oldali, linkek jobb oldali navigációs sáv elrendezését szóközzel és igazítással: középre, majd másolja be a tároló CSS-jét egyenesen a fejléc összetevőjébe.
  • • Hasonlítsa össze a térközt, a térközt és az egyenletes térközt egymás mellett ugyanazon a három dobozon, ahelyett, hogy kitalálná, melyik felel meg a kívánt térköznek.