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

Vienodo pločio „Flexbox“ stulpeliai – CSS generatorius

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 su flex-grow: 1 jau nustatyta visuose trijuose peržiūros laukeliuose. Stebėkite juos: užuot susitraukę, kad tilptų jų turinys, kiekvienas langelis reikalauja identiškos likusios vietos eilutėje, o tai yra visas vienodo pločio lanksčių stulpelių receptas – nėra procentinio pločio, jokios calc(), nėra fiksuotų pikselių matematikos, kad būtų galima sinchronizuoti.

flex-grow: 1 liepia vaikui augti, o nustačius jį kiekvienam vaikui iš eilės reiškia, kad jie visi auga tiek pat, kad jų plotis būtų toks pat, nepaisant to, kiek jų yra arba koks turinys yra jų viduje. Pridėkite arba pašalinkite langelį su toliau esančiais valdikliais, o likę stulpeliai akimirksniu pasiskirstys, kad išliktų vienodi – pakeiskite naršyklės lango dydį per šį išdėstymą gamyboje ir jis elgsis taip pat.

Tai yra vienodo aukščio kortelių tinklelių, kainų lentelės stulpelių ir tolygiai padalintų poraštės sekcijų modelis. Suteikite vienam stulpeliui daugiau erdvės, pakeldami jo lankstumo augimą aukščiau kitų, arba nukopijuokite žemiau esantį CSS bloką tiksliai taip, kaip sugeneruota, kad padalijimas būtų lygus.

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