⭐ 0
🔍
Tekst Pilt PDF ja dokumendid Heli Muusika Elektroonika Aeg Kommunaalteenused Validaatorid Esoteeriline Mängud

CSS Flexboxi generaator

Ehitage CSS-i paindliku kasti paigutus visuaalselt: painduv suund, sisu joondamine, üksuste joondamine, painduv mähis ja konteineri vahe, lisaks lapsepõhine paindlik kasv, paindlik kahanemine ja paindlikkus – kõik koos reaalajas eelvaate ja kopeeritava CSS-iga.

Töötlemine... 0%

Tulemus

Paindliku kasti paigutusel on kaks eraldi reegliraamatut – konteineri atribuudid (painduv suund, sisu õigustamine, üksuste joondamine, paindumine, vahe) ja iga lapse atribuudid (painduv kasv, paindumine, kahanemine, painduv alus) – ja nende segamine on kõige levinum allikas küsimusele, miks see tsentreerimine/kasvamine/mähkimine ei ole nii, nagu ma ootan. See generaator paneb mõlemad reegliraamatud korraga ekraanile: muutke konteineri juhtelemente või mis tahes lapse enda välju ja kolme nummerdatud värvikoodiga kasti värskendatakse kohe, nii et põhjus ja tagajärg jäävad nähtavaks.

Konteineri pool katab iga paigutustelge: valige suund, kuidas jaotatakse lapsed mööda peatelge koos õigustatud sisuga, joondage need risti teljele, otsustage, kas nad murravad uutele joontele, ja määrake nende vahele veerise asemel tühimik. Alampool on sama reaalne: lisage kuni kaheksa kasti, eemaldage kuni kaks ja andke ükskõik millisele neist oma flex-grow, flex-shrink ja flex-alus – generaator prindib CSS-i lapse kohta ainult siis, kui vähemalt üks neist erineb brauseri vaikeseadest, nii et kopeeritud kood ei täida end kunagi flex-grow-ga: 0 kastide puhul, mis seda ei vaja.

Eelseadistatud leheküljed hüppavad otse paigutustele, mida inimesed tegelikult nime järgi otsivad: kuidas tsentreerida div (üks enim küsitud CSS-i paigutuse küsimus, mis on lahendatud nii, et üksused on õigustatud ja joondatud keskele), logo vasakpoolsed lingid-parem navigeerimisriba, võrdse laiusega paindlikud veerud flex-grow abil ning ruumi ja ruumi kõrvuti võrdlemine.

Nagu kõik sellel saidil olevad tööriistad, on generaator tasuta ja töötab täielikult teie brauseris: pole üleslaadimist ega kontot ning see töötab pärast lehe laadimist võrguühenduseta.

🛡️
Teostatud brauseris

Teie failid ja sisendid ei lahku sellest seadmest kunagi. Töötlemine toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud vormingud ja reeglid

  • Konteineri juhtnupud: painduv suund, sisu joondamine, üksuste joondamine, paindumine ja lünkade sisend pikslites, rakendatakse reaalajas eelvaatele.
  • Vaikimisi kolm värvikoodiga lapsekasti (lisada kuni kaheksa, eemalda kuni kaks), millest igaühel on oma paindliku kasvu, painduva kahanemise ja paindepõhise väljad.
  • Kopeeritav CSS-i plokk .flex-konteineri reegliga pluss üks .flex-item-N reegel lapse kohta, millel on mittevaikimisi painduvad omadused.

Peamised eelised

✓ Iga konteineri juhtelement ja iga lapse painduv kasv, painduv kahanemine ja paindumine värskendavad reaalajas kolme nummerdatud eelvaatekasti, nii et näete täpselt, mida teie painduva kasti reeglid teevad enne stiilitabeli puudutamist.
✓ Generaator prindib ainult alamreegleid, mis tegelikult erinevad CSS-i vaikeseadetest, nii et kopeeritud kood jääb lühikeseks ja loetavaks, selle asemel et määrata flex-grow: 0 igas kastis.
✓ Eelseadistatud lehed lahendavad küljendused, mida inimesed otsivad nime järgi: elemendi tsentreerimine, logo-vasakpoolsed lingid-parem navigeerimisriba ja võrdse laiusega paindlikud veerud – avage üks ja tööriist on juba konfigureeritud.

Kasutusjuhtumid

  • • Hankige täpne CSS, et tsentreerida div nii horisontaalselt kui ka vertikaalselt, jälgides, kuidas reaalajas eelvaatekastides toimivad sisu joondamine ja joondamine.
  • • Looge logo vasak, lingid-parem navigeerimisriba paigutus tühiku ja üksuste vahel joondamisega: keskele, seejärel kopeerige konteineri CSS otse oma päise komponenti.
  • • Võrrelge samadel kolmel kastil kõrvuti tühikuid, ruumi ümber ja ühtlaselt, selle asemel, et arvata, milline neist vastab soovitud vahekaugusele.