⭐ 0
🔍
Teksti Kuva PDF & Docs Ääni Musiikki Elektroniikka Aika Apuohjelmat Validaattorit Esoteerinen Pelit

CSS Flexbox Generator

Rakenna CSS-flexbox-asettelu visuaalisesti: flex-direction, tasaa-sisältö, kohdista kohteet, flex-wrap ja aukko säilössä sekä lapsikohtainen flex-grow, flex-shrink ja flex-pohjainen, kaikki live-esikatselulla ja kopioitavalla CSS:llä.

Käsitellään... 0%

Tulos

Flexbox-asettelussa on kaksi erillistä sääntökirjaa – säilön ominaisuudet (joustosuunta, tasaussisältö, tasauskohteet, flex-wrap, aukko) ja kunkin alatason ominaisuudet (flex-grow, flex-shrink, flex-basis) – ja niiden sekoittaminen on yleisin lähde "miksi tämä keskitys / kasvu / rivitys ei ole odotukseni mukaan". Tämä generaattori tuo molemmat sääntökirjat näytölle kerralla: muuta mitä tahansa säilön ohjausobjektia tai minkä tahansa lapsen omia kenttiä ja kolme numeroitua, värikoodattua laatikkoa päivittyvät välittömästi, joten syy ja seuraus pysyvät näkyvissä.

Säilön puoli kattaa jokaisen asettelun akselin: valitse suunta, valitse, miten lapset jakautuvat pääakselille tasaussisällön kanssa, kohdista ne poikkiakselille, päätä, rivittyvätkö ne uusille viivoille ja aseta rako marginaalien sijaan niiden väliin. Lapsipuoli on aivan yhtä todellinen: lisää laatikoita enintään kahdeksaan, poista enintään kaksi ja anna jollekin niistä oma flex-grow-, flex-shrink- ja flex-pohjansa – generaattori tulostaa vain lapsikohtaisen CSS-säännön, kun vähintään yksi niistä poikkeaa selaimen oletusasetuksista, joten kopioitu koodi ei koskaan täytä itseään flex-grow-toiminnolla: 0 ei tarvitse sitä laatikoissa.

Esiasetetut sivut hyppäävät suoraan asetteluihin, joita ihmiset todella etsivät nimellä: kuinka keskitetään div (yksittäinen eniten kysytty CSS-asettelukysymys, joka ratkaistaan tasaussisällöllä ja tasauskohteet), jotka molemmat on asetettu keskelle), logo-vasen linkit-oikea navigointipalkki, yhtä leveät joustavat sarakkeet flex-grow-toiminnon avulla ja sen rinnakkainen vertailu välilyönnistä ja välilyönnistä.

Kuten kaikki tämän sivuston työkalut, generaattori on ilmainen ja toimii kokonaan selaimessasi: ei latausta, ei tiliä, ja se toimii offline-tilassa sivun latautumisen jälkeen.

🛡️
Suoritetaan selaimessa

Tiedostosi ja syötteesi eivät koskaan poistu tältä laitteelta. Käsittely toimii täysin offline-tilassa. 100 % turvallinen.

Hyväksytyt muodot ja säännöt

  • Säilön säätimet: joustosuunta, tasaussisältö, kohteiden tasaus, flex-wrap ja aukkosyöttö pikseleinä, joita käytetään livenä esikatselussa.
  • Kolme värikoodattua lapsilaatikkoa oletuksena (lisää enintään kahdeksan, poista enintään kaksi), jokaisessa on omat joustavat kasvu-, flex-kutistumis- ja flex-basis -kentät.
  • Kopioitavissa oleva CSS-lohko, jossa on .flex-container-sääntö ja yksi .flex-item-N-sääntö lapsia kohti, jolla on muita kuin oletusarvoisia flex-ominaisuuksia.

Tärkeimmät edut

✓ Jokainen säilön ohjaus ja jokaisen lapsen flex-grow, flex-shrink ja flex-basis päivittää kolme numeroitua esikatseluruutua livenä, joten näet tarkalleen, mitä flexbox-säännöt tekevät ennen kuin kosketat tyylitaulukkoa.
✓ Generaattori tulostaa vain alisäännöt, jotka todella poikkeavat CSS-oletusasetuksista, joten kopioitu koodi pysyy lyhyenä ja luettavissa sen sijaan, että flex-grow: 0 määritettäisiin uudelleen jokaisessa laatikossa.
✓ Esiasetetut sivut ratkaisevat asettelut, joita ihmiset etsivät nimellä: keskittää div, logo-vasen linkit-oikea navigointipalkki ja yhtä leveät joustavat sarakkeet – avaa yksi ja työkalu on jo määritetty.

Käyttötapaukset

  • • Hanki tarkka CSS keskittääksesi div sekä vaaka- että pystysuunnassa katsomalla, kuinka sisällön tasaaminen ja tasaus toimivat live-esikatseluruuduissa.
  • • Luo logo-vasen, linkit-oikea -navigointipalkin asettelu välilyönnillä ja tasaa kohteet: keskelle ja kopioi sitten säilön CSS suoraan otsikkokomponenttiin.
  • • Vertaa välilyöntiä, välitilaa ja tilaa tasaisesti vierekkäin samoissa kolmessa laatikossa sen sijaan, että arvaisit, kumpi vastaa haluamaasi väliä.