CSS Flexbox ምንድን ነው?
CSS Flexbox (Flexible Box Layout) ቦታን ለማከፋፈል እና ንጥሎችን በረድፍ ወይም በዓምድ ለማሰለፍ የሚያገለግል አንድ-ልኬት አቀማመጥ ሞዴል ነው። የ flex ኮንቴይነር በ display: flex ይገለጻል፣ እና ቀጥተኛ ልጆቹ flex ንጥሎች ይሆናሉ። ዋና ኮንቴይነር ባህሪያት፡ flex-direction (ረድፍ ወይም ዓምድ)፣ flex-wrap (ነጠላ vs. ብዙ-መስመር)፣ justify-content (ዋና-ዘንግ አሰላለፍ)፣ align-items (ተሻጋሪ-ዘንግ አሰላለፍ በመስመር)፣ እና align-content (ብዙ መስመሮችን ተሻጋሪ-ዘንግ አሰላለፍ)። ዋና ንጥል ባህሪያት፡ flex-grow (ንጥሉ ምን ያህል እንደሚያድግ)፣ flex-shrink (ምን ያህል እንደሚቀንስ)፣ flex-basis (የመጀመሪያ መጠን)፣ እና align-self (ለተወሰነ ንጥል የኮንቴይነሩን align-items ይሽራል)። Flexbox ለናቪጌሽን አሞሌዎች፣ ለካርድ ረድፎች፣ ለተማከሉ አቀማመጦች እና ለማንኛውም አንድ-ልኬት ዝግጅት ተስማሚ ነው።
CSS Flexbox ጄነሬተርን እንዴት መጠቀም እንደሚቻል
-
ሳጥኑን እና ግቤቱን በመጠቀም የኮንቴይነር ባህሪያቱን (flex-direction፣ flex-wrap፣ justify-content፣ align-items፣ align-content፣ gap) ያስተካክሉ።
-
ለመምረጥ በቅድሚያ እይታ ውስጥ ያለ ማንኛውም ንጥል ጠቅ ያድርጉ (ብርቱካናማ ይሆናል)።
-
በንጥሉ ፓነል ውስጥ የተመረጠው ንጥሉ flex-grow፣ flex-shrink፣ flex-basis እና align-self ያዋቅሩ።
-
ተጨማሪ ንጥሎችን ለመጨመር '+ ንጥል ጨምር' ጠቅ ያድርጉ፤ የተመረጠውን ንጥል ለመሰረዝ 'አስወግድ' ጠቅ ያድርጉ።
-
የተፈጠረውን ኮድ ለማየት በ CSS እና HTML ትሮች መካከል ይቀያይሩ፣ ከዚያ ቅዳ ጠቅ ያድርጉ።
-
ወደ ነባሪ 3-ንጥል አቀማመጥ ለመመለስ ሁሉንም ዳግም አስጀምር ጠቅ ያድርጉ።