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

õigusta-sisu: tühik selgituste vahel (CSS)

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

See leht avab generaatori, mille õigustussisu on seatud tühikule: esimene kast asetseb ühetasaselt vastu konteineri algusserva, viimane kast on samal tasapinnal vastu selle otsaserva ning ülejääv ruum jagatakse keskel asuvate kastide vahel võrdseteks vahedeks – mitte kunagi enne esimest ega pärast viimast.

See on detail, mida inimesed segavad. Ümberruum annab igale kastile võrdse varu mõlemal küljel, nii et kastide vahelised vahed on kaks korda laiemad kui kahe välisserva vahed (iga serv saab ainult ühe kasti veerise, mitte kaks). ruumi-ühtlane läheb kaugemale ja muudab iga vahe ühesuuruseks, kaasa arvatud kaks välimist serva – ainuke kolmest, mille vahekaugus tundub täiesti ühtlane.

Lülitage rippmenüü õigustatud sisu kolme alloleva väärtuse vahel ja vaadake, kuidas samad kolm kasti ümber asetsevad – see on kiireim viis erinevuse mõistmiseks selle meeldejätmise asemel. Kopeerige CSS selle jaoks, mis vastab tegelikult soovitud vahekaugusele.

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