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

Samanleveät Flexbox-sarakkeet — CSS-generaattori

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, jossa on flex-grow: 1 jo asetettu kaikkiin kolmeen esikatseluruutuun. Tarkkaile niitä: sen sijaan, että ne kutistuisivat sisältöön sopivaksi, jokainen laatikko vaatii identtisen osuuden rivin jäljellä olevasta tilasta, mikä on yhtä leveiden joustavien sarakkeiden koko resepti – ei prosenttileveyksiä, ei calc(), ei kiinteiden pikselien matematiikkaa synkronoitavaksi.

flex-grow: 1 käskee lasta kasvamaan, ja sen asettaminen jokaisen rivin lapsen päälle tarkoittaa, että he kaikki kasvavat saman verran, joten ne päätyvät saman leveyteen riippumatta siitä, kuinka monta niitä on tai mitä sisältöä niissä on. Lisää tai poista laatikko alla olevilla säätimillä ja loput sarakkeet jakautuvat välittömästi uudelleen pysyäkseen samana – muuta selainikkunan kokoa tämän asettelun yli tuotannossa, niin se toimii samalla tavalla.

Tämä on kuvio tasakorkuisten korttiruudukoiden, hinnoittelutaulukon sarakkeiden ja tasaisesti jaettujen alatunnisteosien takana. Anna yhdelle sarakkeelle lisää tilaa nostamalla sen flex-grow muiden yläpuolelle tai kopioi alla oleva CSS-lohko täsmälleen sellaisena kuin se on luotu puhtaan tasajaon saamiseksi.

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