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

Divi tsentreerimine CSS-is (Flexbox)

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

Siin on otsene vastus CSS-is enim küsitud küsimusele: div keskpunktiks asetage kuva: flex, justify-content: center ja align-items: tsenter selle vanemale. See on kõik – kolm deklaratsiooni konteineril ja laps istub selle sees ideaalselt keskele nii horisontaalselt kui ka vertikaalselt, igas suuruses. See leht avab generaatori täpselt selle kombinatsiooniga, mis on juba rakendatud, nii et allolev eelvaade näitab, et see töötab praegu kolmel nummerdatud kastil.

Enne flexboxi vajas div tsentreerimine häkkisid: veeris: 0 auto tsentreeriti ainult horisontaalselt ja töötas ainult fikseeritud laiusega plokil; vertikaalne tsentreerimine tähendas positsiooni: absoluutne negatiivsete veeristega või teisendustrikk, mõlemad haprad hetkel, mil sisu suurus muutub. Justify-content käsitleb peatelge ja align-items risttelge – koos tsentreerivad nad mõlemas suunas, olenemata lapse pikkusest või laiusest, mistõttu sai sellest paarist standardvastus.

Lohistage allolevat juhtelementi ja vaadake, kuidas kolm eelvaatekasti jäävad keskele, kui konteiner kuju muudab, või lisage nende vahele tühik. Kui see tundub õige, kopeerige allosas olev CSS-plokk otse oma stiililehele – see töötab samamoodi igas kaasaegses brauseris, teeki pole vaja.

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