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

CSS Flexbox generatorius

Kurkite CSS flexbox maketą vizualiai: flex-direction, justify-content, align-items, flex-wrap ir gap konteineryje bei kiekvieno elemento flex-grow, flex-shrink ir flex-basis – visa tai su realaus laiko peržiūra ir kopijuojamu CSS kodu.

🔒 Visiškai apdorojama jūsų naršyklėje – niekas, kurį čia įvedėte, niekada neįkeliama.

Apdorojama... 0%

Rezultatas

Flexbox maketas turi dvi atskiras taisyklių knygas – konteinerio savybes (flex-direction, justify-content, align-items, flex-wrap, gap) ir kiekvieno elemento savybes (flex-grow, flex-shrink, flex-basis) – ir jų sumaišymas yra dažniausia priežastis klaidoms „kodėl tai nesicentruoja / neauga / nekeliama į naują eilutę taip, kaip tikiuosi“. Šis generatorius parodo abi taisyklių knygas vienu metu: pakeiskite bet kurį konteinerio valdiklį ar bet kurio elemento laukelius, ir trys sunumeruoti, spalvomis pažymėti langeliai iškart atsinaujina, todėl priežastis ir pasekmė lieka matomos.

Konteinerio pusė apima kiekvieną maketo ašį: pasirinkite kryptį, nuspręskite, kaip elementai paskirstomi pagrindinėje ašyje naudojant justify-content, lygiuokite juos skersinėje ašyje, nuspręskite, ar jie keliami į naujas eilutes, ir nustatykite tarpą (gap) užuot naudoję margin gudrybes. Elementų pusė yra tokia pat reali: pridėkite langelių iki aštuonių, pašalinkite iki dviejų ir suteikite bet kuriam iš jų savo flex-grow, flex-shrink bei flex-basis – generatorius išveda atskirą CSS taisyklę elementui tik tada, kai bent viena iš šių reikšmių skiriasi nuo naršyklės numatytosios, todėl nukopijuotas kodas niekada neprisipildo flex-grow: 0 langeliams, kuriems to nereikia.

Išankstinių nustatymų puslapiai iškart peršoka prie maketų, kurių žmonės iš tikrųjų ieško pagal pavadinimą: kaip centruoti div (dažniausiai užduodamas CSS maketo klausimas, išsprendžiamas nustačius justify-content ir align-items į center), logotipas kairėje – nuorodos dešinėje naršymo juosta, vienodo pločio lankstūs stulpeliai naudojant flex-grow bei gretutinis space-between palyginimas su artimiausiais giminaičiais space-around ir space-evenly.

Kaip ir visi šios svetainės įrankiai, generatorius yra nemokamas ir veikia tik jūsų naršyklėje: jokio įkėlimo, jokios paskyros, o įkėlus puslapį veikia ir be interneto ryšio.

Patinka šis įrankis? Manote, kad šis produktas naudingas? Matote jame potencialo ir norite paremti?

🛡️
Vykdoma naršyklėje

Jūsų bylos ir įvestys niekada nepalieka šio įrenginio. Apdorojimas vyksta visiškai atsijungus. 100 % saugu.

Priimtini formatai ir taisyklės

  • Konteinerio valdikliai: flex-direction, justify-content, align-items, flex-wrap ir gap įvesties laukelis pikseliais, taikomi peržiūrai realiuoju laiku.
  • Pagal numatymą trys spalvomis pažymėti elementai (pridėkite iki aštuonių, pašalinkite iki dviejų), kiekvienas su savo flex-grow, flex-shrink ir flex-basis laukeliais.
  • Kopijuojamas CSS blokas su .flex-container taisykle ir po vieną .flex-item-N taisyklę kiekvienam elementui, kurio flex savybės skiriasi nuo numatytųjų.

Pagrindiniai privalumai

✓ Kiekvienas konteinerio valdiklis ir kiekvieno elemento flex-grow, flex-shrink bei flex-basis atnaujina tris sunumeruotas peržiūros dėžutes realiuoju laiku, todėl tiksliai matote, ką daro jūsų flexbox taisyklės, dar prieš liesdami stilių failą.
✓ Generatorius išveda tik tas elementų taisykles, kurios iš tikrųjų skiriasi nuo CSS numatytųjų reikšmių, todėl nukopijuotas kodas lieka trumpas ir aiškus, o ne kartoja flex-grow: 0 kiekvienai dėžutei.
✓ Išankstinių nustatymų puslapiai išsprendžia maketus, kurių žmonės ieško pagal pavadinimą: div centravimas, logotipas kairėje – nuorodos dešinėje naršymo juosta ir vienodo pločio lankstūs stulpeliai – atidarykite vieną ir įrankis jau sukonfigūruotas.

Naudojimo atvejai

  • • Gaukite tikslų CSS, kaip centruoti bloką tiek horizontaliai, tiek vertikaliai – stebėkite, kaip justify-content ir align-items veikia tiesioginės peržiūros laukeliuose.
  • • Sukurkite navigacijos juostos maketą su logotipu kairėje ir nuorodomis dešinėje, naudodami space-between ir align-items: center, tada nukopijuokite konteinerio CSS tiesiai į savo antraštės komponentą.
  • • Palyginkite space-between, space-around ir space-evenly vienas šalia kito ant tų pačių trijų laukelių, užuot spėlioję, kuris atitinka jūsų norimus tarpus.