⭐ 0
🔍
Teksts Attēls PDF un dokumenti Audio Mūzika Elektronika Laiks Komunālie pakalpojumi Validatori Ezotērisks Spēles

CSS Flexbox ģenerators

Veido CSS flexbox izkārtojumu vizuāli: flex-direction, justify-content, align-items, flex-wrap un gap konteineram, plus katram bērnam flex-grow, flex-shrink un flex-basis, viss ar dzīvo priekšskatījumu un kopējamu CSS.

🔒 Pilnībā apstrādāts jūsu pārlūkprogrammā — nekas, ko jūs šeit ievadāt, nekad netiek augšupielādēts.

Apstrādā... 0%

Rezultāts

Flexbox izkārtojumam ir divas atsevišķas noteikumu grāmatas – īpašības konteineram (flex-direction, justify-content, align-items, flex-wrap, gap) un īpašības katram bērnam (flex-grow, flex-shrink, flex-basis) – un to sajaukšana ir visbiežākais avots kļūdām "kāpēc šis necentrējas/neaug/neiet jaunā rindā tā, kā es gaidu". Šis ģenerators liek abas noteikumu grāmatas uz ekrāna uzreiz: maini jebkuru konteinera vadīklu vai jebkuru bērna lauku, un trīs numurēti, krāsu kodēti lodziņi atjaunojas acumirklī, lai cēlonis un sekas paliktu redzamas.

Konteinera puse nosedz katru izkārtojuma asi: izvēlies virzienu, izvēlies, kā bērni tiek sadalīti pa galveno asi ar justify-content, izlīdzini tos pa šķērsasi, izlem, vai tie aplaužas jaunās rindās, un iestati gap, nevis margin hakerus starp tiem. Bērnu puse ir tikpat īsta: pievieno lodziņus līdz astoņiem, noņem līdz diviem, un piešķir jebkuram no tiem savu flex-grow, flex-shrink un flex-basis – ģenerators izdrukā vienu bērnam paredzētu CSS kārtulu tikai tad, kad vismaz viena no tām atšķiras no pārlūka noklusējuma, tāpēc kopētais kods nekad sevi neaizpilda ar flex-grow: 0 uz lodziņiem, kam to nevajag.

Sagatavju lapas uzreiz lec uz izkārtojumiem, ko cilvēki faktiski meklē pēc nosaukuma: kā centrēt div (vienīgais visvairāk uzdotais CSS izkārtojuma jautājums, atrisināts ar justify-content un align-items abiem iestatītiem uz center), navigācijas josla ar logo pa kreisi un saitēm pa labi, vienāda platuma elastīgas kolonnas caur flex-grow, un blakus-blakus salīdzinājums space-between pret tā tuvākajiem radiniekiem space-around un space-evenly.

Tāpat kā katrs rīks šajā vietnē, ģenerators ir bezmaksas un pilnībā darbojas tavā pārlūkā: nav augšupielādes, nav konta, un tas turpina strādāt bezsaistē, tiklīdz lapa ir ielādēta.

Patīk šis rīks? Domājat, ka šis produkts ir noderīgs? Redzat tajā potenciālu un vēlaties to atbalstīt?

🛡️
Izpildīts pārlūkā

Jūsu faili un ievadītie dati nekad nepamet šo ierīci. Apstrāde notiek pilnībā bezsaistē. 100% droši.

Pieņemtie formāti un noteikumi

  • Konteinera vadīklas: flex-direction, justify-content, align-items, flex-wrap un gap ievade pikseļos, piemērota dzīvajā priekšskatījumam.
  • Trīs krāsu kodēti bērna lodziņi pēc noklusējuma (pievieno līdz astoņiem, noņem līdz diviem), katram savi flex-grow, flex-shrink un flex-basis lauki.
  • Kopējams CSS bloks ar .flex-container kārtulu plus viena .flex-item-N kārtula katram bērnam, kuram ir nenoklusējuma flex īpašības.

Galvenās priekšrocības

✓ Katra konteinera vadīkla un katra bērna flex-grow, flex-shrink un flex-basis atjauno trīs numurētus priekšskatījuma lodziņus dzīvajā, tāpēc tu precīzi redzi, ko dara tavas flexbox kārtulas, pirms pieskaries stilu lapai.
✓ Ģenerators izdrukā tikai tās bērnu kārtulas, kas patiešām atšķiras no CSS noklusējumiem, tāpēc kopētais kods paliek īss un lasāms, nevis atkārto flex-grow: 0 katram lodziņam.
✓ Sagatavju lapas atrisina izkārtojumus, ko cilvēki meklē pēc nosaukuma: div centrēšana, navigācijas josla ar logo pa kreisi un saitēm pa labi, un vienāda platuma elastīgas kolonnas – atver vienu, un rīks jau ir nokonfigurēts.

Lietošanas gadījumi

  • • Iegūstiet precīzu CSS, lai centrētu `div` gan horizontāli, gan vertikāli, vērojot, kā `justify-content` un `align-items` darbojas reāllaika priekšskatījuma lodziņos.
  • • Izveidojiet navigācijas joslas izkārtojumu ar logo kreisajā pusē un saitēm labajā pusē, izmantojot `space-between` un `align-items: center`, pēc tam iekopējiet konteinera CSS tieši savā galvenes komponentē.
  • • Salīdziniet `space-between`, `space-around` un `space-evenly` blakus uz tiem pašiem trim lodziņiem, nevis miniet, kurš atbilst jūsu vēlamajam atstarpēm.