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

Divin keskittäminen CSS:ssä (Flexbox)

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ässä on suora vastaus CSS:n eniten kysyttyyn kysymykseen: keskittääksesi div, aseta näyttö: flex, justify-content: center ja align-items: keskitä sen yläpäähän. Siinä kaikki – kolme ilmoitusta säiliössä, ja lapsi istuu täydellisesti keskellä sekä vaaka- että pystysuunnassa sen sisällä missä tahansa koossa. Tämä sivu avaa generaattorin, jonka yhdistelmä on jo käytössä, joten alla oleva esikatselu näyttää sen toimivan tällä hetkellä kolmessa numeroidussa laatikossa.

Ennen flexboxia div:n keskittäminen vaati hakkeja: marginaali: 0 auto keskitetty vain vaakasuoraan ja toimi vain kiinteän levyisen lohkon kanssa; vertikaalinen keskitys tarkoitti sijaintia: absoluuttinen negatiivisilla marginaaleilla tai muunnostemppu, molemmat hauraita, kun sisällön koko muuttui. justify-content käsittelee pääakselia ja align-items käsittelee poikkiakselia – yhdessä ne keskittyvät molempiin suuntiin riippumatta siitä, kuinka pitkä tai leveä lapsi on, minkä vuoksi tästä parista tuli vakiovastaus.

Vedä mitä tahansa alla olevaa säädintä ja katso, että kolme esikatseluruutua pysyvät keskellä, kun säilön muoto muuttuu, tai lisää niiden väliin rako. Kun se näyttää oikealta, kopioi alareunassa oleva CSS-lohko suoraan tyylitaulukkoosi – se toimii samalla tavalla kaikissa nykyaikaisissa selaimissa, kirjastoa ei tarvita.

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