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

perustella-sisältö: välilyönti selitettyjen välissä (CSS)

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

Tämä sivu avaa generaattorin tasaussisällöllä välilyönnillä: ensimmäinen laatikko on samassa tasossa säiliön aloitusreunaa vasten, viimeinen laatikko sen päätyreunaa vasten ja ylimääräinen tila jaetaan yhtä suuriin rakoihin keskellä olevien laatikoiden välillä - ei koskaan ennen ensimmäistä tai viimeisen jälkeen.

Se on yksityiskohta, jonka ihmiset sekoittavat. space-around antaa jokaiselle laatikolle yhtä suuren marginaalin molemmille puolille, joten laatikoiden väliset raot päätyvät kaksi kertaa niin leveiksi kuin kahdessa ulkoreunassa olevat raot (kukin reuna saa vain yhden laatikon marginaalin, ei kahta). Tila-tasaisesti menee pidemmälle ja tekee jokaisesta raosta samankokoisen, mukaan lukien kaksi ulkoreunaa - ainoa kolmesta, jossa välit näyttävät täysin tasaisilta koko matkan.

Vaihda perustellun sisällön pudotusvalikko kolmen alla olevan arvon välillä ja katso, kuinka samat kolme laatikkoa järjestyvät uudelleen – se on nopein tapa nähdä ero sen ulkoamisen sijaan. Kopioi CSS sille, joka vastaa haluamaasi välilyöntiä.

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