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

Egyenlő szélességű Flexbox oszlopok — CSS-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

Ez az oldal megnyitja a generátort a flex-grow funkcióval: 1 már be van állítva mindhárom előnézeti mezőn. Figyelje meg őket: ahelyett, hogy zsugorodik, hogy illeszkedjen a tartalmukhoz, minden doboz azonos arányt követel a sorban megmaradt helyből, ami az egyenlő szélességű rugalmas oszlopok teljes receptje – nincs százalékos szélesség, nincs calc(), nincs fix pixel matematika a szinkronban tartáshoz.

flex-grow: Az 1 azt mondja a gyermeknek, hogy nőjön, és ha a sorban lévő összes gyerekre állítja, azt jelenti, hogy mindannyian ugyanannyit nőnek, tehát ugyanolyan szélesek lesznek, függetlenül attól, hogy hányan vannak, vagy milyen tartalom van bennük. Adjon hozzá vagy távolítson el egy dobozt az alábbi vezérlőkkel, és a fennmaradó oszlopok azonnal újraelosztásra kerülnek, hogy egyenlők maradjanak – éles környezetben méretezheti át a böngészőablakot ezen az elrendezésen, és az ugyanúgy viselkedik.

Ez a minta az egyenlő magasságú kártyarácsok, az ártáblázat oszlopai és az egyenletesen felosztott láblécek mögött. Adjon egy oszlopnak több helyet úgy, hogy a flex-növekedést a többi fölé emeli, vagy másolja az alábbi CSS-blokkot pontosan úgy, ahogyan az létrejött a tiszta egyenlő felosztás érdekében.

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