የFlexbox ጀነሬተር

በምስላዊ መቆጣጠሪያዎች የflex ኮንቴይነር እና አይተሞቹን ያዘጋጁ፣ አቀማመጡ በቀጥታ ሲለወጥ ይመልከቱ፣ እና CSS ኮዱን በአንድ ጠቅታ ይቅዱ።

ቅድመ-ማስተካከያዎች
ኮንቴይነር
አቅጣጫ (Direction)
ጠቀልል
ይዘትን አሰልፍ
አካላትን አስተካክል
አይተሞች
አይተም 1
ራስን አስተካክል
CSS
አቀማመጥዎን ለመቅረጽ ኮንቴይነሩንና አይተሞቹን ያስተካክሉ።

የእርስዎ አቀማመጥ የሚሰራው በቀጥታ በብሮውዘርዎ ላይ ነው። እዚህ የሚያዘጋጁት ማንኛውም ነገር ወደ BroBroGo አይሰቀልም።

በተደጋጋሚ የሚነሱ ጥያቄዎች

በjustify-content እና በalign-items መካከል ያለው ልዩነት ምንድን ነው?

Justify-content አይተሞቹን በዋናው ዘንግ (main axis) — ማለትም ረድፉ ወይም አምዱ በሚፈስበት አቅጣጫ — ሲያሰፋቸው፣ align-items ደግሞ በሌላኛው ዘንግ ላይ ያስቀምጣቸዋል። አቅጣጫውን ከrow ወደ column ሲቀይሩት ሁለቱ ዘንጎች ይለዋወጣሉ፤ ስለዚህ justify-content ከላይ ወደ ታች፣ align-items ደግሞ ከግራ ወደ ቀኝ መስራት ይጀምራሉ።

የእያንዳንዱ አይተም መቆጣጠሪያዎች እንዴት ይሰራሉ?

አንድን አይተም በቁጥሩ ይምረጡ፣ ከዚያም ትርፍ ቦታን ለመሙላት ምን ያህል እንደሚያድግ (grow)፣ ቦታ ሲጠብ ምን ያህል እንደሚጠብብ (shrink)፣ መነሻ መጠኑን (basis) እና የራሱን የዘንግ አሰላለፍ ይወስኑ። Order ደግሞ HTML ኮዱን ሳይነኩ አይተሙን በስክሪኑ ላይ ቀድሞ ወይም ዘግይቶ እንዲታይ ያደርገዋል። እርስዎ የቀየሯቸው አይተሞች ብቻ በCSS ውስጥ የራሳቸው ህግ ያገኛሉ።

wrap እና align-content መቼ ነው የሚያስፈልጉት?

Wrapping ሲጠፋ፣ እያንዳንዱ አይተም በአንድ መስመር ላይ እንዲሆን ይገደዳል እና ሊጠብብ ይችላል። ሲያበሩት ግን የማይበቁት አይተሞች ወደ ቀጣዩ መስመር ይወርዳሉ — በዚህ ጊዜ align-content ስራውን ይረከባል፣ ይህም መስመሮቹን እንደ አንድ ቡድን ያሰፋቸዋል። Gap ደግሞ ያለ margin በአይተሞች እና በመስመሮች መካከል ያለውን ክፍተት ያስተካክላል።

የCSS Cubic Bezier ጀነሬተርየeasing ኩርባን ለመቅረጽ ሁለቱን እጀታዎች ይጎትቱ፣ ነጥቡ ከቋሚው ጋር ሲወዳደር ይመልከቱ፣ እና የcubic-bezier() እሴቱን ይቅዱ።የBorder Radius ጀነሬተርእያንዳንዱን ማዕዘን በተንሸራታቾች ይክቡ፣ በኤሊፕቲካል ሁነታ ተፈጥሯዊ የblob ቅርጾችን ይስሩ፣ እና CSS ኮዱን ወዲያውኑ ይቅዱ።የBox Shadow ጀነሬተርbox-shadow ለመቅረጽ ተንሸራታቾችን ይጎትቱ፣ ለጥልቀት ንብርብሮችን ይደረድሩ፣ እና የተጠናቀቀውን CSS ወዲያውኑ ይቅዱ።የGradient ጀነሬተርlinear, radial, ወይም conic gradient ይገንቡ፣ የቀለም ማቆሚያዎችን ይጨምሩ እና አቅጣጫውን ያስተካክሉ፣ ከዚያም CSS ኮዱን በአንድ ጠቅታ ይቅዱ።የCSS Grid ጀነሬተርአምዶችዎን እና ረድፎችዎን ያዘጋጁ፣ አይተሞችን ለማስቀመጥ በሴሎች ላይ ይጎትቱ፣ እና የgrid CSS ኮዱን ከተዛማጅ HTML ጋር በአንድ ጠቅታ ይቅዱ።የCSS clamp() ካልኩሌተርለአነስተኛ እና ትላልቅ ስክሪኖች መጠን ያስገቡ እና በመካከላቸው በተለዋዋጭ ሁኔታ የሚያድግ የclamp() እሴት ያግኙ — ለጽሑፍ መጠኖች፣ padding፣ margins ወይም gaps።የቀለም መቀየሪያቀለሞችን በHEX, RGB, HSL, HSV, CMYK እና LAB መካከል ይቀይሩ — አንዱን ሳጥን ሲያስተካክሉ ሌሎቹ አብረው ይዘመናሉ።