⭐ 0
🔍
Tekstas Vaizdas PDF ir dokumentai Garsas Muzika Elektronika Laikas Komunalinės paslaugos Validatoriai Ezoterinis Žaidimai

CSS Flexbox naršymo juosta – logotipas kairėje, nuorodos dešinėje

Sukurkite CSS lanksčiojo dėžutės išdėstymą vizualiai: sureguliuokite kryptį, išlyginkite turinį, sulygiuokite elementus, lanksčią apvyniojimą ir tarpą konteineryje, taip pat kiekvienam vaikui lanksčiojo augimo, lankstaus susitraukimo ir lankstumo pagrindu – visa tai su tiesiogine peržiūra ir kopijuojamu CSS.

Apdorojama... 0%

Rezultatas

Šiame puslapyje atidaromas „flexbox“ generatorius, iš anksto nustatytas pagal klasikinį naršymo juostos išdėstymą: lygiuoti – turinys nustatytas į tarpą tarp ir lygiuoti elementus – centre. Įdėkite logotipą į pirmąjį laukelį ir naršymo nuorodų eilutę į paskutinį (arba padalinkite nuorodas per vidurinius langelius), o „flexbox“ konteineris nustums juos į priešingus juostos galus, o kiekvienas elementas išliks tame pačiame vertikaliame centre, nesvarbu, kokio aukščio būtų logotipas ar nuorodos tekstas.

Tarpas tarp yra tai, kas daro šį darbą: pirmasis vaikas prisegamas prie pradžios krašto, o paskutinis vaikas – prie galo, tada visi likę vaikai tolygiai paskirstomi tarp jų – tiksliai kairysis logotipas, dešiniosios nuorodos formuoja beveik kiekvieną svetainės antraštę. sulygiuoti elementus: centre išsprendžiamas vertikalus lygiavimas, kuriam anksčiau reikėjo nulaužti linijos aukštį arba lentelės langelio rodymo gudrybes.

Sureguliuokite vaikų skaičių, kad jis atitiktų jūsų tikrąją naršymo juostą – du langeliai plikam logotipui ir raginimo veikti juostai, daugiau logotipo ir kelių nuorodų – ir žiūrėkite, kaip išdėstymas prisitaiko tiesiogiai. Nukopijuokite CSS bloką, kai jis atitiks jūsų antraštę, arba atidarykite tarpą tarp išankstinių nustatymų, jei norite pamatyti tą ypatybę, palyginti su jos artimais giminaičiais.

🛡️
Vykdoma naršyklėje

Jūsų failai ir įvestis niekada nepalieka šio įrenginio. Apdorojimas vykdomas visiškai neprisijungus. 100% saugus.

Priimami formatai ir taisyklės

  • Sudėtinio rodinio valdikliai: lanksti kryptis, lygiuoti turinį, lygiuoti elementus, lankstus apvyniojimas ir tarpo įvestis pikseliais, tiesiogiai pritaikyti peržiūrai.
  • Pagal numatytuosius nustatymus trys spalvomis koduotos vaikų dėžutės (pridėkite iki aštuonių, pašalinkite iki dviejų), kiekviena su savo lanksčiojo augimo, lankstaus susitraukimo ir lankstaus pagrindo laukais.
  • Kopijuojamas CSS blokas su .flex-container taisykle ir viena .flex-item-N taisykle kiekvienam vaikui, kuris turi nenumatytąsias lankstumo savybes.

Pagrindiniai privalumai

✓ Kiekvienas konteinerio valdiklis ir kiekvienas vaiko lankstus augimas, lankstus susitraukimas ir lankstumo pagrindu atnaujinami trys sunumeruoti peržiūros laukeliai, todėl prieš paliesdami stiliaus lapą tiksliai matote, ką daro jūsų lanksčios dėžutės taisyklės.
✓ Generatorius spausdina tik antrines taisykles, kurios iš tikrųjų skiriasi nuo numatytųjų CSS nustatymų, todėl nukopijuotas kodas lieka trumpas ir įskaitomas, o ne iš naujo nustato flex-grow: 0 kiekviename langelyje.
✓ Iš anksto nustatyti puslapiai išsprendžia išdėstymus, kurių žmonės ieško pagal pavadinimą: centruojamas div, logotipas su kairiosiomis nuorodomis ir dešinioji naršymo juosta ir vienodo pločio lankstūs stulpeliai – atidarykite vieną ir įrankis jau sukonfigūruotas.

Naudojimo atvejai

  • • Gaukite tikslią CSS, kad centruotumėte „div“ tiek horizontaliai, tiek vertikaliai, stebėdami, kaip tiesioginės peržiūros laukeliuose veikia elementų išlyginimas ir lygiavimas.
  • • Sukurkite logotipo kairėje, nuorodų dešinėje naršymo juostos išdėstymą su tarpais tarp elementų ir lygiavimo: centre, tada nukopijuokite sudėtinio rodinio CSS tiesiai į antraštės komponentą.
  • • Palyginkite tarpą tarp, tarpų aplink ir tolygiai vienas šalia kito tuose pačiuose trijuose langeliuose, užuot spėlioję, kuris iš jų atitinka norimą tarpą.