የCSS Flexbox አቀማመጥ መሠረታዊ ጽንሰ-ሀሳብ
CSS Flexbox የአንድን ድረ-ገጽ አቀማመጥ በአንድ አቅጣጫ (በአግድም ወይም በቁመት) በቀላሉ ለመቅረጽ የሚያስችል ጠቃሚ መዋቅር ነው። ይህ መዋቅር በዋናነት በሁለት ክፍሎች ላይ የተመሰረተ ነው፡ እነሱም የያዘው ክፍል (flex container) እና በውስጡ የሚገኙት ነጠላ አካላት (flex items) ናቸው። የFlexbox ዋነኛ ጥቅም በውስጡ ያሉ አካላት በስክሪን መጠን መለዋወጥ ላይ ተመስርተው ራሳቸውን እንዲያስተካክሉ፣ እንዲያድጉ ወይም እንዲጠቡ ማስቻሉ ነው።
ይህንን አቀማመጥ በኮድ ከመጻፍዎ በፊት በምስል አይቶ ለመለማመድ እና ትክክለኛውን ኮድ ለማግኘት የFlexbox ጀነሬተርን መጠቀም ሂደቱን ያቃልላል። መሣሪያው ተጠቃሚዎች የተለያዩ የFlexbox ባህሪያትን በምስላዊ መቆጣጠሪያዎች እንዲያስተካክሉ፣ ለውጡን በቀጥታ እንዲያዩ እና የተዘጋጀውን የCSS ኮድ እንዲቀዱ ይረዳል።
የኮንቴይነር ባህሪያት (Container Properties)
የ flex ኮንቴይነር በውስጡ ያሉትን አይተሞች አጠቃላይ ፍሰት እና አሰላለፍ የሚወስን ዋናው ክፍል ነው። በጀነሬተሩ ውስጥ የሚከተሉትን የኮንቴይነር መቆጣጠሪያዎች ማስተካከል ይቻላል፦
- አቅጣጫ (Direction): አይተሞቹ የሚቀመጡበትን ዋና ዘንግ ይወስናል። አማራጮቹ
ረድፍ(ረድፍ)፣የተገላቢጦሽ ረድፍ(የተገላቢጦሽ ረድፍ)፣አምድ(አምድ)፣ እናየተገላቢጦሽ አምድ(የተገላቢጦሽ አምድ) ናቸው። - ጠቀልል (Wrap): አይተሞቹ በአንድ መስመር ላይ ብቻ እንዲወሰኑ ወይም ቦታ ሲጠብ ወደ ቀጣዩ መስመር እንዲሸጋገሩ ያደርጋል። አማራጮቹ
አትጠቀልል(አትጠቀልል)፣ጠቀልል(ጠቀልል)፣ እናበተገላቢጦሽ ጠቅልል(በተገላቢጦሽ ጠቅልል) ያካትታሉ። - ይዘትን አሰልፍ: አይተሞችን በዋናው ዘንግ (main axis) ላይ እንዴት እንደሚሰለፉ ይወስናል። አማራጮቹ
መጀመሪያ(መጀመሪያ)፣መጨረሻ(መጨረሻ)፣መሃል(መሃል)፣በመካከል ያለ ክፍተት(በመካከል ያለ ክፍተት)፣በዙሪያው ያለ ክፍተት(በዙሪያው ያለ ክፍተት)፣ እናእኩል ክፍተት(እኩል ክፍተት) ናቸው። - አካላትን አስተካክል: አይተሞችን በሌላኛው ዘንግ (cross axis) ላይ ለማሰለፍ ያገለግላል። አማራጮቹ
መጀመሪያ(መጀመሪያ)፣መጨረሻ(መጨረሻ)፣መሃል(መሃል)፣ዘርጋ(ዘርጋ)፣ እናመሠረታዊ መስመር(መሠረታዊ መስመር) ናቸው። - ይዘትን አስተካክል: ከአንድ በላይ መስመሮች ሲኖሩ (wrapping ሲበራ) በመስመሮቹ መካከል ያለውን ክፍተት ያስተካክላል። አማራጮቹ
መጀመሪያ፣መጨረሻ፣መሃል፣ዘርጋ፣በመካከል ያለ ክፍተት፣በዙሪያው ያለ ክፍተት፣ እናእኩል ክፍተትናቸው። - ክፍተት (Gap): በአይተሞች መካከል እና በመስመሮች መካከል ያለውን የቦታ ርቀት በቁጥር ለመወሰን ያገለግላል።
የአይተም ባህሪያት (Item Properties)
በኮንቴይነሩ ውስጥ ያሉ ነጠላ አይተሞች እያንዳንዳቸው የራሳቸው የሆነ ባህሪ ሊኖራቸው ይችላል። በጀነሬተሩ ውስጥ "አይተም አክል" የሚለውን ሲጫኑ አዲስ አይተም (ለምሳሌ "Item 5") ይታያል። ለእያንዳንዱ አይተም የሚከተሉትን እሴቶች መወሰን ይቻላል፦
- ቅደም ተከተል (Order): የአይተሙን የመታያ ቅደም ተከተል በቁጥር ይወስናል።
- ማሳደጊያ (Grow): አንድ አይተም በኮንቴይነሩ ውስጥ ያለውን ትርፍ ቦታ ለመሙላት ምን ያህል ማደግ እንዳለበት በቁጥር ይገልጻል።
- ማሳነሻ: ቦታ በሚጠብበት ጊዜ አይተሙ ምን ያህል መኮማተር ወይም መጠብብ እንዳለበት በቁጥር ይወስናል።
- መሠረት: የአይተሙን መነሻ መጠን በቁጥር ወይም በ
ራስ-ሰር(ራስ-ሰር) ለመወሰን ያገለግላል። - ራስን አስተካክል: ለአንድ የተወሰነ አይተም ብቻ ከሌሎች የተለየ የዘንግ አሰላለፍ ለመስጠት ያገለግላል። አማራጮቹ
ራስ-ሰር(ራስ-ሰር)፣መጀመሪያ፣መጨረሻ፣መሃል፣ዘርጋ፣ እናመሠረታዊ መስመርናቸው።
የዘንጎች ግንኙነት እና የአቀማመጥ ህጎች
የFlexbox አሰራር በዋናው ዘንግ (main axis) እና በሌላኛው ዘንግ (cross axis) መስተጋብር ላይ የተመሰረተ ነው። አቅጣጫውን ከረድፍ ወደ አምድ በሚቀይሩበት ጊዜ ሁለቱ ዘንጎች ይለዋወጣሉ። ይህ መለዋወጥ justify-content እና align-items የሚሰሩበትን አቅጣጫ በቀጥታ ይቀይረዋል።
የመጠቅለል (wrapping) ባህሪ ሲጠፋ ሁሉም አይተሞች በአንድ መስመር ላይ እንዲሆኑ ይገደዳሉ። ነገር ግን ጠቀልል (wrap) ሲበራ፣ በኮንቴይነሩ ውስጥ የማይበቁት አይተሞች ወደ ቀጣዩ መስመር ይወርዳሉ። በዚህ ጊዜ align-content የተባለው ባህሪ እነዚህን መስመሮች እንደ አንድ ቡድን አድርጎ በኮንቴይነሩ ውስጥ ያሰፋቸዋል። ክፍተት (Gap) ደግሞ በአይተሞች መካከል እና በመስመሮች መካከል ያለውን ርቀት ይወስናል።
በጀነሬተሩ ውስጥ የCSS ኮድ በሚመነጭበት ጊዜ፣ ባህሪያቸው የተቀየሩ አይተሞች ብቻ የራሳቸው የCSS ህግ ይወጣላቸዋል። "CSS ቅዳ" የሚለውን ቁልፍ ሲጫኑ የቁልፉ ጽሑፍ ወደ "Copied" ይቀየራል።
የተለመዱ የFlexbox አቀማመጦች
በFlexbox አማካኝነት በድረ-ገጽ ዝግጅት ላይ በተደጋጋሚ የሚፈለጉ አቀማመጦችን በቀላሉ መገንባት ይቻላል። ከእነዚህም መካከል የሚከተሉት ይገኙበታል፦
- መሃል (Centered Element): አንድን አካል በአግድምም ሆነ በቁመት በትክክል መሃል ላይ ለማስቀመጥ።
- የአሰሳ አሞሌ (Navigation Bar): የድረ-ገጽ አርዕስት እና ሊንኮችን በረድፍ ላይ በእኩል ርቀት ለማስቀመጥ
- ቁልል: አካላትን አንዱን ከሌላው በታች በአምድ መልክ ለመደርደር።
- ካርዶች: መረጃዎችን በሳጥን መልክ ጎን ለጎን አሰልፎ ቦታ ሲጠብ ወደ ታች እንዲወርዱ ለማድረግ።
- የጎን አሞሌ: ዋናውን ይዘት እና የጎን ማውጫን ጎን ለጎን ለማስቀመጥ።
የግላዊነት እና የሂደት አሰራር
ይህ መሣሪያ የተጠቃሚውን ግላዊነት ሙሉ በሙሉ በጠበቀ መልኩ ይ ይሰራል። የእርስዎ አቀማመጥ የሚሰራው በቀጥታ በብሮውዘርዎ ላይ ነው። እዚህ የሚያዘጋጁት ማንኛውም ነገር ወደ BroBroGo አይሰቀልም።
ተደጋግሞ የሚጠየቁ ጥያቄዎች (FAQ)
በ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 በአይተሞች እና በመስመሮች መካከል ያለውን ክፍተት ያስተካክላል።