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

CSS Flexbox -navigointipalkki — Logo vasemmalla, linkit oikealla

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 flexbox-generaattorin esiasetetun klassisen navigointipalkin asettelun: tasaus-sisältö asetettu välilyönnille ja kohdista-kohteet keskelle. Laita logo ensimmäiseen ruutuun ja rivi navigointilinkkejä viimeiseen (tai jaa linkit keskimmäisten ruutujen poikki), ja flexbox-säilö työntää ne palkin vastakkaisiin päihin pitäen samalla jokaisen kohteen samassa pystysuorassa keskellä riippumatta siitä, kuinka korkea logo tai linkkiteksti on.

välilyönti tekee tästä toimivuudesta: se kiinnittää ensimmäisen lapsen aloitusreunaan ja viimeisen lapsen päätyreunaan ja jakaa loput lapset tasaisesti niiden väliin – täsmälleen vasemmanpuoleinen logo ja oikeat linkit muodostavat melkein jokaisen sivuston otsikon. kohdista kohteet: keskitys ratkaisee sitten pystysuuntaisen kohdistuksen, joka edellytti rivinkorkeushakkeja tai taulukkosolujen näyttötemppuja.

Säädä lasten määrä vastaamaan todellista navigointipalkkia – kaksi ruutua paljaalle logolle ja toimintakehotuspalkille, lisää logolle ja useita linkkejä – ja katso asettelun mukautumista livenä. Kopioi CSS-lohko, kun se vastaa otsikkoasi, tai avaa välilyönti esiasetuksen välillä, jos haluat nähdä yhden ominaisuuden verrattuna sen lähisukulaisiin.

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