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

Võrdse laiusega Flexboxi veerud – CSS-i 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

See leht avab flex-grow-ga generaatori: 1 on juba seatud kõigis kolmes eelvaatekastis. Vaadake neid: selle asemel, et kahandada, et see sobiks nende sisuga, taotleb iga kast identset osa rea ​​järelejäänud ruumist, mis on võrdse laiusega paindlike veergude kogu retsept – ei protsendilaiusi, ei calc(), pole fikseeritud pikslite matemaatikat, mida sünkroonis hoida.

flex-grow: 1 käsib lapsel kasvada ja selle seadmine igale reas olevale lapsele tähendab, et nad kõik kasvavad sama palju, nii et nad on sama laiusega olenemata sellest, kui palju neid on või milline sisu nende sees on. Lisage või eemaldage allolevate juhtelementidega kast ja ülejäänud veerud jaotuvad koheselt ümber, et jääda võrdseks – muutke brauseriakna suurust selle paigutuse kohal tootmises ja see käitub samamoodi.

See on muster võrdse kõrgusega kaardiruudustiku, hinnatabeli veergude ja ühtlaselt jagatud jaluse osade taga. Andke ühele veerule rohkem ruumi, tõstes selle flex-grow teistest kõrgemale või kopeerige allolev CSS-plokk täpselt nii, nagu see on loodud puhta võrdse jaotuse jaoks.

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