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

CSS Flexbox -generaattori

Rakenna CSS flexbox -asettelu visuaalisesti: flex-direction, justify-content, align-items, flex-wrap ja gap säilössä, sekä lapsikohtaiset flex-grow, flex-shrink ja flex-basis, kaikki varustettuna live-esikatselulla ja kopioitavalla CSS:llä.

🔒 Käsitelty kokonaan selaimessasi – mitään tähän kirjoittamaasi ei koskaan ladata.

Käsitellään... 0%

Tulos

Flexbox-asettelussa on kaksi erillistä sääntökirjaa — ominaisuudet säilössä (flex-direction, justify-content, align-items, flex-wrap, gap) ja ominaisuudet kussakin lapsessa (flex-grow, flex-shrink, flex-basis) — ja niiden sekoittaminen on yleisin syy siihen, ettei "miksei tämä keskity / kasva / rivity" toimi odotetulla tavalla. Tämä generaattori tuo molemmat sääntökirjat näytölle samanaikaisesti: muuta mitä tahansa säilön ohjainta tai lapsen omia kenttiä ja kolme numeroitua, värikoodattua laatikkoa päivittyvät välittömästi, joten syy ja seuraus pysyvät näkyvinä.

Säilön puoli kattaa jokaisen asetteluakselin: valitse suunta, määritä miten lapset jaetaan pääakselilla justify-contentilla, tasaa ne ristiakselilla, päätä rivityvätkö ne uusille riveille, ja aseta väli marginaalikikkojen sijaan niiden väliin. Lapsipuoli on yhtä todellinen: lisää laatikoita jopa kahdeksaan, poista vähintään kahteen, ja anna mille tahansa niistä oma flex-grow, flex-shrink ja flex-basis — generaattori tulostaa lapsikohtaisen CSS-säännön vain, jos ainakin yksi näistä eroaa selaimen oletuksesta, joten kopioitu koodi ei koskaan täyty tarpeettomilla flex-grow: 0 -määrityksillä laatikoissa, jotka eivät niitä tarvitse.

Esiasetussivut hyppäävät suoraan niihin asetteluihin, joita ihmiset todella hakevat nimellä: kuinka keskitetään div (yksittäinen kysytyin CSS-asettelukysymys, ratkaistu asettamalla sekä justify-content että align-items centeriin), logo-vasemmalle linkit-oikealle -navigaatiopalkki, tasalevyiset joustavat sarakkeet flex-grow'n avulla, ja rinnakkainen vertailu space-betweenistä sen lähisukulaisiin space-around ja space-evenly.

Kuten jokainen työkalu tällä sivustolla, generaattori on ilmainen ja toimii kokonaan selaimessasi: ei lähetystä, ei tiliä, ja se jatkaa toimintaansa offline-tilassa, kun sivu on latautunut.

Nautitko tästä työkalusta? Onko tämä tuote mielestäsi hyödyllinen? Näetkö siinä potentiaalia ja haluat tukea sitä?

🛡️
Suoritetaan selaimessa

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

Hyväksytyt muodot ja säännöt

  • Säilön ohjaimet: flex-direction, justify-content, align-items, flex-wrap ja gap-syöttö pikseleinä, sovellettuna livenä esikatseluun.
  • Kolme värikoodattua lapsilaatikkoa oletuksena (lisää jopa kahdeksan, poista vähintään kahteen), joilla jokaisella on omat flex-grow, flex-shrink ja flex-basis -kenttänsä.
  • Kopioitava CSS-lohko, jossa on .flex-container-sääntö sekä yksi .flex-item-N-sääntö jokaiselle lapselle, jolla on ei-oletus flex-ominaisuuksia.

Keskeiset hyödyt

✓ Jokainen säilön ohjain ja jokaisen lapsen flex-grow, flex-shrink ja flex-basis päivittävät kolme numeroitua esikatselulaatikkoa livenä, joten näet tarkalleen mitä flexbox-säännöt tekevät ennen kuin kosket tyylitiedostoon.
✓ Generaattori tulostaa vain ne lapsisäännöt, jotka todella poikkeavat CSS-oletuksista, joten kopioitu koodi pysyy lyhyenä ja luettavana sen sijaan, että se toistaisi flex-grow: 0 jokaisessa laatikossa.
✓ Esiasetussivut ratkaisevat ne asettelut, joita ihmiset hakevat nimellä: div-keskitäminen, logo-vasemmalle linkit-oikealle -navigaatiopalkki ja tasalevyiset joustavat sarakkeet — avaa yksi niistä ja työkalu on jo valmiiksi määritetty.

Käyttötapaukset

  • • Katso live-esikatselulaatikoista, miten justify-content ja align-items keskittävät elementin vaakaan ja pystyyn, ja saat tarkan CSS-tyylin suoraan käyttöösi.
  • • Rakenna navigaatiopalkki, jossa logo on vasemmalla ja linkit oikealla, käyttämällä space-between- ja align-items: center -määrityksiä. Kopioi sitten säiliön CSS-tyyli suoraan header-komponenttiisi.
  • • Vertalle space-between-, space-around- ja space-evenly-määrityksiä vierekkäin samoilla kolmella laatikolla sen sijaan, että arvaisit, mikä niistä tuottaa haluamasi välistyksen.