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

CSS Flexbox Generaator

Ehita CSS flexbox-paigutust visuaalselt: flex-direction, justify-content, align-items, flex-wrap ja gap konteineril, pluss iga lapse flex-grow, flex-shrink ja flex-basis, kõik koos otse-eelvaate ja kopeeritava CSS-iga.

🔒 Töödeldud täielikult teie brauseris – midagi, mida siia sisestate, ei laadita kunagi üles.

Töötlen... 0%

Tulemus

Flexbox-paigutusel on kaks eraldi reeglistikku — omadused konteineril (flex-direction, justify-content, align-items, flex-wrap, gap) ja omadused igal lapsel (flex-grow, flex-shrink, flex-basis) — ja nende segi ajamine on kõige levinum „miks see ei tsentreeru / ei kasva / ei murdu nii, nagu ma ootan” vigade allikas. See generaator paneb mõlemad reeglistikud korraga ekraanile: muuda mis tahes konteineri juhtelementi või mis tahes lapse enda välju ja kolm nummerdatud, värvikoodiga kasti uuenevad koheselt, nii et põhjus ja tagajärg jäävad nähtavaks.

Konteineri pool katab iga paigutustelje: vali suund, otsusta, kuidas lapsed jaotatakse piki peatelge justify-content abil, joonda nad ristteljel, otsusta, kas nad murduvad uutele ridadele, ja määra gap marginaalihäkkide asemel nende vahele. Lapse pool on sama tõene: lisa kaste kuni kaheksa, eemalda kuni kaks, ja anna igale neist oma flex-grow, flex-shrink ja flex-basis — generaator prindib lapse-põhise CSS-reegli ainult siis, kui vähemalt üks neist erineb brauseri vaikeväärtusest, nii et kopeeritud kood ei täida end kunagi flex-grow: 0-ga kastidel, mis seda ei vaja.

Eelseadistatud lehed hüppavad otse paigutustesse, mida inimesed tegelikult nime järgi otsivad: kuidas divi tsentreerida (kõige küsitavam CSS-paigutuse küsimus, lahendatuna justify-content ja align-items mõlema väärtusega center), logo-vasakul-lingid-paremal navbar, võrdse laiusega paindlikud veerud flex-grow abil ja space-between kõrvuti võrdlus selle lähedaste sugulaste space-around ja space-evenly vastu.

Nagu iga tööriist sellel saidil, on generaator tasuta ja töötab täielikult sinu brauseris: ei mingeid üleslaadimisi, kontot pole vaja ja see jätkab tööd võrguühenduseta, kui leht on laaditud.

Meeldib see tööriist? Arvad, et see toode on kasulik? Näed selles potentsiaali ja soovid seda toetada?

🛡️
Käivitatakse brauseris

Sinu failid ja sisestused ei lahku sellest seadmest. Töötlus toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud formaadid ja reeglid

  • Konteineri juhtelemendid: flex-direction, justify-content, align-items, flex-wrap ja gap-sisend pikslites, rakendatuna otse eelvaatesse.
  • Vaikimisi kolm värvikoodiga lapsekasti (lisa kuni kaheksa, eemalda kuni kaks), igaühel oma flex-grow, flex-shrink ja flex-basis väljad.
  • Kopeeritav CSS-plokk .flex-container reegliga pluss üks .flex-item-N reegel iga lapse kohta, millel on vaikeväärtustest erinevad flex-omadused.

Peamised eelised

✓ Iga konteineri juhtelement ja iga lapse flex-grow, flex-shrink ning flex-basis uuendavad kolme nummerdatud eelvaatekasti otse, nii et näed täpselt, mida sinu flexbox-reeglid teevad, enne kui stylesheeti puutud.
✓ Generaator prindib ainult need lapse-reeglid, mis erinevad CSS-i vaikeväärtustest, nii et kopeeritud kood jääb lühikeseks ja loetavaks, selle asemel et korrata flex-grow: 0 igal kastil.
✓ Eelseadistatud lehed lahendavad paigutused, mida inimesed nime järgi otsivad: divi tsentreerimine, logo-vasakul-lingid-paremal navbar ja võrdse laiusega paindlikud veerud – ava üks ja tööriist on juba seadistatud.

Kasutusjuhud

  • • Vaata, kuidas justify-content ja align-items otse eelvaates kastidele mõjuvad, ning saa täpne CSS, mis joondab elemendi nii horisontaalselt kui ka vertikaalselt keskele.
  • • Ehita navigeerimisriba, kus logo on vasakul ja lingid paremal, kasutades space-between ja align-items: center. Seejärel kopeeri konteineri CSS otse oma päise komponenti.
  • • Võrdle space-between, space-around ja space-evenly samade kolme kasti peal kõrvuti, et ei peaks arvama, milline neist annab sulle vajaliku vahe.