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

CSS Flexbox 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

Lanksčiojo dėžutės išdėstymas turi dvi atskiras taisyklių sąsiuvinius – sudėtinio rodinio ypatybes (lanksčioji kryptis, lygiuoti turinį, lygiuoti elementus, lankstus apvyniojimas, tarpas) ir kiekvieno vaiko savybes (lankstus augimas, lankstus susitraukimas, lankstus pagrindas) – o jų maišymas yra dažniausias „kodėl šis centravimas / augimas / apvyniojimas nėra taip, kaip aš tikiuosi“ šaltinis. Šis generatorius ekrane pateikia abi taisyklių sąsiuvinius vienu metu: pakeiskite bet kurį konteinerio valdiklį arba bet kuriuos vaiko laukus, o trys sunumeruoti, spalvomis pažymėti laukeliai nedelsiant atnaujinami, todėl priežastis ir pasekmės lieka matomos.

Konteinerio pusė apima kiekvieną išdėstymo ašį: pasirinkite kryptį, pasirinkite, kaip vaikai bus paskirstyti išilgai pagrindinės ašies su pagrindimo turiniu, sulygiuokite juos ant skersinės ašies, nuspręskite, ar jie perkelia į naujas linijas, ir tarp jų nustatykite tarpą, o ne paraštes. Vaikiška pusė yra tokia pat tikra: pridėkite iki aštuonių langelių, pašalinkite iki dviejų ir bet kuriam iš jų suteikite savo lanksčiojo augimo, lankstaus susitraukimo ir lankstumo pagrindą – generatorius spausdina tik vaikui skirtą CSS taisyklę, kai bent viena iš jų skiriasi nuo naršyklės numatytosios, todėl nukopijuotas kodas niekada neapsipildo flex-grow: 0 laukeliuose, kuriems nereikia.

Iš anksto nustatyti puslapiai pereina tiesiai į išdėstymus, kurių žmonės iš tikrųjų ieško pagal pavadinimą: kaip centruoti div (vienintelis dažniausiai užduodamas CSS išdėstymo klausimas, išspręstas su pagrindimu turiniu ir lygiuoti elementus į centrą), logotipo kairėje nuorodų dešinėje naršymo juostoje, vienodo pločio lanksčius stulpelius naudojant lanksčią augimą ir lyginant tarpo santykinį tarpą ir santykinį tarpą.

Kaip ir kiekvienas šios svetainės įrankis, generatorius yra nemokamas ir veikia tik jūsų naršyklėje: neįkeliama, nėra paskyros ir, įkėlus puslapį, jis veikia neprisijungus.

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