⭐ 0
🔍
Tekst Pilt PDF ja dokumendid Heli Muusika Elektroonika Aeg Kommunaalteenused Validaatorid Esoteeriline Mängud

CSS Flexboxi navigeerimisriba – logo vasakul, lingid paremal

Ehitage CSS-i paindliku kasti paigutus visuaalselt: painduv suund, sisu joondamine, üksuste joondamine, painduv mähis ja konteineri vahe, lisaks lapsepõhine paindlik kasv, paindlik kahanemine ja paindlikkus – kõik koos reaalajas eelvaate ja kopeeritava CSS-iga.

Töötlemine... 0%

Tulemus

See leht avab flexboxi generaatori eelseadistuse klassikalisele navigeerimisriba paigutusele: joondus-sisu on seatud tühikule ja joondus-üksused keskele. Asetage esimesse kasti logo ja viimasesse rida navigeerimislinke (või jagage lingid keskmiste kastide vahel) ja flexbox-konteiner surub need riba vastaskülgedesse, hoides kõik üksused samal vertikaalsel keskel, olenemata sellest, kui kõrge on logo või lingi tekst.

tühik paneb selle toimima: see kinnitab esimese lapse algusserva ja viimase lapse lõppserva külge, seejärel jaotab ülejäänud lapsed nende vahel ühtlaselt – täpselt vasakpoolse logo ja parempoolsed lingid kujundavad peaaegu iga saidi päise, mida kasutatakse. align-items: keskel lahendab seejärel vertikaalse joonduse, mis varem vajas reakõrguse häkkimist või tabelilahtri kuvamise trikke.

Kohandage laste arvu nii, et see vastaks teie tegelikule navigeerimisribale – kaks kasti palja logo ja CTA-riba jaoks, rohkem logo ja mitme lingi jaoks – ja vaadake paigutuse kohandamist otseülekandes. Kopeerige CSS-i plokk, kui see ühtib teie päisega, või avage eelseadistuse vaheline tühik, kui soovite seda ühte omadust võrrelda selle lähisugulastega.

🛡️
Teostatud brauseris

Teie failid ja sisendid ei lahku sellest seadmest kunagi. Töötlemine toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud vormingud ja reeglid

  • Konteineri juhtnupud: painduv suund, sisu joondamine, üksuste joondamine, paindumine ja lünkade sisend pikslites, rakendatakse reaalajas eelvaatele.
  • Vaikimisi kolm värvikoodiga lapsekasti (lisada kuni kaheksa, eemalda kuni kaks), millest igaühel on oma paindliku kasvu, painduva kahanemise ja paindepõhise väljad.
  • Kopeeritav CSS-i plokk .flex-konteineri reegliga pluss üks .flex-item-N reegel lapse kohta, millel on mittevaikimisi painduvad omadused.

Peamised eelised

✓ Iga konteineri juhtelement ja iga lapse painduv kasv, painduv kahanemine ja paindumine värskendavad reaalajas kolme nummerdatud eelvaatekasti, nii et näete täpselt, mida teie painduva kasti reeglid teevad enne stiilitabeli puudutamist.
✓ Generaator prindib ainult alamreegleid, mis tegelikult erinevad CSS-i vaikeseadetest, nii et kopeeritud kood jääb lühikeseks ja loetavaks, selle asemel et määrata flex-grow: 0 igas kastis.
✓ Eelseadistatud lehed lahendavad küljendused, mida inimesed otsivad nime järgi: elemendi tsentreerimine, logo-vasakpoolsed lingid-parem navigeerimisriba ja võrdse laiusega paindlikud veerud – avage üks ja tööriist on juba konfigureeritud.

Kasutusjuhtumid

  • • Hankige täpne CSS, et tsentreerida div nii horisontaalselt kui ka vertikaalselt, jälgides, kuidas reaalajas eelvaatekastides toimivad sisu joondamine ja joondamine.
  • • Looge logo vasak, lingid-parem navigeerimisriba paigutus tühiku ja üksuste vahel joondamisega: keskele, seejärel kopeerige konteineri CSS otse oma päise komponenti.
  • • Võrrelge samadel kolmel kastil kõrvuti tühikuid, ruumi ümber ja ühtlaselt, selle asemel, et arvata, milline neist vastab soovitud vahekaugusele.