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

pateisinti turinį: tarpas tarp paaiškinimų (CSS)

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 generatorius, kurio pagrindimo turinys nustatytas į tarpą tarp: pirmasis langelis yra lygiai prieš konteinerio pradinį kraštą, paskutinis langelis yra lygiai prieš jo galinį kraštą, o likusi erdvė padalijama į lygius tarpus tarp langelių viduryje – niekada prieš pirmąjį arba po paskutinio.

Tai detalės, kurias žmonės sumaišo. Tarpas aplink kiekvienam langeliui suteikia vienodą paraštę abiejose jo pusėse, todėl tarpai tarp langelių yra dvigubai platesni nei tarpai prie dviejų išorinių kraštų (kiekvienam kraštui tenka tik viena dėžutės paraštė, o ne dvi). erdvė tolygiai eina toliau ir padaro kiekvieną tarpą tokio pat dydžio, įskaitant du išorinius kraštus – vienintelį iš trijų, kur atstumas atrodo visiškai vienodas.

Perjunkite pagrindimo turinio išskleidžiamąjį meniu tarp trijų toliau pateiktų reikšmių ir stebėkite, kaip persitvarko tie patys trys langeliai – tai greičiausias būdas pamatyti skirtumą, o ne jį įsiminti. Nukopijuokite CSS, kuris atitinka norimą tarpą.

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