Dhaliyaha Flexbox

U diyaari weel flex ah iyo walxihiisa adigoo isticmaalaya xakamaynta muuqaalka, daawo qaabka oo si toos ah u falcelinaya, oo ku koobiyeey CSS-ka hal gujin.

Hababka Diyaarsan
Weelka (Container)
Jihada
Wrap
Justify content
La jaanqaad walxaha (Align items)
Walxaha
Shay 1
La jaanqaad naftaada (Align self)
CSS
Hagaaji weelka iyo walxaha si aad u qaabayso qaabkaaga.

Qaabkaaga waxaa si toos ah loogu dhisayaa biraawsarkaaga. Waxba oo aad halkan ku dejiso looma soo gudbiyo BroBroGo.

Su'aalaha badanaa la isweydiiyo

Waa maxay farqiga u dhexeeya justify-content iyo align-items?

Justify-content wuxuu kala fariisiyaa walxaha dhidibka weyn (main axis) — jihada uu safka ama tiirku u socdo — halka align-items uu dhigayo dhidibka kale. U beddel jihada saf (row) una beddel tiir (column) oo labada dhidib ayaa isweydaarsanaya, markaa justify-content wuxuu bilaabayaa inuu ka shaqeeyo kor ilaa hoos halka align-items uu ka shaqaynayo bidix ilaa midig.

Sidee u shaqeeyaan xakamaynta shay-kasta?

Dooro shay lambarkiisa, ka dibna dejiso inta uu weynaanayo si uu u buuxiyo meelaha bannaan, inta uu yaraanayo marka meeshu cidhiidhi tahay, cabbirkiisa bilowga ah (basis) iyo la-jaanqaadkiisa dhidibka kale. Order wuxuu shayga u dhaqaajiyaa mar hore ama mar dambe shaashadda isagoon taaban HTML-ka. Kaliya walxaha aad dhab ahaantii beddesho ayaa helaya xeer u gaar ah CSS-ka dhexdiisa.

Goormay wrap iyo align-content muhiim yihiin?

Markay wrapping-ku off tahay, shay kasta waxaa lagu qasbaa hal xariiq waxaana loo cadaadin karaa si ka cidhiidhsan. Daar (turn it on) oo walxaha aan ku habboonayn waxay u dhacayaan xariiqda xigta — taasi waa marka align-content uu la wareego, isagoo kala fariisinaya xariiqyada sidii koox ahaan. Gap wuxuu dejiyaa masaafada u dhaxaysa walxaha, iyo xariiqyada, iyadoo aan la isticmaalin margins.

Waxaa qortay oo dib u eegtay kooxda tafatirka ee BroBroGo.Markii ugu dambaysay ee la cusboonaysiiyay:

Dhaliyaha Flexbox waa qalab kuu ogolaanaya inaad si muuqaal ah u qaabayso weel flex ah iyo walxihiisa. Adigoo isticmaalaya xakamaynta muuqaalka ee qalabka, waxaad qeexi kartaa qaabka aad u baahan tahay, waxaadna si toos ah u daawan kartaa isbeddelada ka muuqda shaashadda ka hor inta aadan koobiyaysan koodka CSS ee naqshadaada.

Qaab-dhismeedka waxaa si toos ah loogu dhisayaa biraawsarkaaga. Waxba oo aad halkan ku dejiso looma soo gudbiyo BroBroGo, taas oo ka dhigaysa habka mid ku kooban qalabkaaga oo keliya.

Fahanka Dhidibada iyo Jihada Weelka (Container)

CSS Flexbox wuxuu ku shaqeeyaa nidaam labo dhidib ah: dhidibka weyn (main axis) iyo dhidibka kale (cross axis). Jihada aad u doorato weelka waxay go'aamisaa sida dhidibadan u shaqeeyaan:

  • Saf (Row): Walxaha waxay u düzmanayaan si toosan bidix ilaa midig. Dhidibka weyn waa midka toosan, halka dhidibka kale uu yahay midka taagan.
  • Saf rogan: Walxaha waxay u düzmanayaan si toosan laakiin waxay ka bilaabmaan midig ilaa bidix.
  • Tiir (Column): Walxaha waxay u düzmanayaan si taagan kor ilaa hoos. Tani waxay isweydaarsaneysaa dhidibada; dhidibka weyn wuxuu noqonayaa midka taagan, halka dhidibka kale uu noqonayo midka toosan.
  • Tiir rogan: Walxaha waxay u düzmanayaan si taagan laakiin waxay ka bilaabmaan hoos ilaa kor.

Markaad u beddesho jihada Saf (Row) una beddelto Tiir (Column), labada dhidib ayaa isweydaarsanaya. Isbeddelkan wuxuu si toos ah u saameeyaa sida hantida justify-content iyo align-items u shaqeeyaan.

Maareynta Meelaynta iyo Isku-habaynta

Si aad u xakamayso booska iyo masaafada u dhaxaysa walxaha, qalabku wuxuu bixiyaa dhowr ikhtiyaar oo muhiim ah oo saameeya weelka:

Justify content

Hantidani waxay maamushaa sida walxaha loogu qaybiyo dhidibka weyn. Waxaad dooran kartaa:

  • Bilowga: Walxaha waxay isugu ururayaan bilowga dhidibka.
  • Dhamaadka: Walxaha waxay aadaan dhamaadka dhidibka.
  • Dhexe: Walxaha waxaa la dhigaa dhexda.
  • Masaafada u dhaxaysa: Walxaha ugu horeeya iyo kuwa ugu dambeeya waxay ku dhegayaan darafyada, booska soo harayna si siman ayaa loogu qaybiyaa walxaha dhexda u dhaxeeya.
  • Masaafada hareeraha: Walxo kasta waxay hareeraheeda ku yeelanaysaa boos siman, taas oo ka dhigaysa in masaafada darafyada ay noqoto kala bar masaafada u dhaxaysa labada shay.
  • Masaafada si siman: Dhammaan walxaha iyo darafyada weelka waxay yeelanayaan masaafo isku mid ah oo siman.

La jaanqaad walxaha (Align items)

Hantidani waxay go'aamisaa sida walxaha loogu düzayo dhidibka kale. Ikhtiyaarada jira waxaa ka mid ah Bilowga, Dhamaadka, Dhexe, Fidid (Stretch) (oo walxaha ku fidinaya si ay u buuxiyaan dhererka weelka), iyo Baseline (oo walxaha u simaya xariiqda qoraalkooda).

Farqiga (Gap)

Tani waxay dejiya masaafada tooska ah iyo ta taagan ee u dhaxaysa walxaha iyo xariiqyada iyadoo aan la isticmaalin margins.

Duubista Walxaha iyo align-content

Markay wrapping-ku off tahay (Ha duubin (No wrap)), dhammaan walxaha waxaa lagu qasbaa hal xariiq, xitaa haddii ay ka weyn yihiin weelka, taas oo keeni karta in la cadaadiyo.

Markaad doorato Duub (Wrap) ama Duub rogan, walxaha aan ku habboonayn xariiqda kowaad waxay u dhacayaan xariiqda xigta. Markay taasi dhacdo, hantida La jaanqaad nuxurka (Align content) ayaa la wareegaysa si ay u maamusho booska u dhaxeeya xariiqyadaas sidii koox ahaan. Waxaad u habayn kartaa si la mid ah justify-content adigoo isticmaalaya Bilowga, Dhamaadka, Dhexe, Fidid (Stretch), Masaafada u dhaxaysa, Masaafada hareeraha, ama Masaafada si siman.

Dejinta Guryaha Shay kasta oo Gaar ah

Marka laga soo tago guryaha weelka guud, waxaad wax ka beddeli kartaa habka uu u dhaqmo shay kasta oo gaar ah. Markaad gujiso Ku dar shay, shay cusub ayaa soo baxaya (tusaale, "Item 5"). Waxaad markaas u habayn kartaa guryahan soo socda:

  • Nidaamka (Order): Wuxuu aqbalaa qiimo lambar ah. Tani waxay shayga u dhaqaajisaa mar hore ama mar dambe shaashadda iyadoo aan la beddelin qaab-dhismeedka HTML-ka.
  • Koraan (Grow): Wuxuu qeexayaa awoodda uu shaygu u leeyahay inuu weynaado si uu u buuxiyo booska bannaan ee weelka marka loo eego walxaha kale.
  • Yaraada (Shrink): Wuxuu qeexayaa inta uu shaygu yaraan karo marka booska weelku uu cidhiidhi noqdo.
  • Salka (Basis): Tani waa cabbirka bilowga ah ee shayga ka hor intaan booska haray la qaybin. Waxaad u dejin kartaa lambar ama Auto.
  • La jaanqaad naftaada (Align self): Tani waxay u ogolaanaysaa shay keliya inuu iska indho-tiro amarkii guud ee align-items ee weelka, isagoo dooranaya hab u gaar ah oo uu ula jaanqaado dhidibka kale.

Kaliya walxaha aad dhab dhab ahaan u beddesho guryahooda ayaa helaya xeer u gaar ah oo laga dhalinayo koodka CSS-ka dhexdiisa.

Helitaanka Koodha CSS

Markaad dhammaystirto qaabayntaada, koodka CSS ee weelka iyo walxaha la beddelay wuxuu si toos ah ugu diyaarsan yahay qaybta CSS. Markaad gujiso Koobiyeey CSS, badhanka wuxuu isu beddelayaa "Copied" si uu kuu xaqiijiyo in koodka lagu koobiyey clipboard-kaaga.

Su'aalaha Badanaa La Isweydiiyo (FAQ)

Waa maxay farqiga u dhexeeya justify-content iyo align-items? Justify-content wuxuu kala fariisiyaa walxaha dhidibka weyn (main axis) — jihada uu safka ama tiirku u socdo — halka align-items uu dhigayo dhidibka kale. U beddel jihada saf (row) una beddel tiir (column) oo labada dhidib ayaa isweydaarsanaya, markaa justify-content wuxuu bilaabayaa inuu ka shaqeeyo kor ilaa hoos halka align-items uu ka shaqaynayo bidix ilaa midig.

Sidee u shaqeeyaan xakamaynta shay-kasta? Dooro shay lambarkiisa, ka dibna dejiso inta uu weynaanayo si uu u buuxiyo meelaha bannaan, inta uu yaraanayo marka meeshu cidhiidhi tahay, cabbirkiisa bilowga ah (basis) iyo la-jaanqaadkiisa dhidibka kale. Order wuxuu shayga u dhaqaajiyaa mar hore ama mar dambe shaashadda isagoon taaban HTML-ka. Kaliya walxaha aad dhab ahaantii beddesho ayaa helaya xeer u gaar ah CSS-ka dhexdiisa.

Goormay wrap iyo align-content muhiim yihiin? Markay wrapping-ku off tahay, shay kasta waxaa lagu qasbaa hal xariiq waxaana loo cadaadin karaa si ka cidhiidhsan. Daar (turn it on) oo walxaha aan ku habboonayn waxay u dhacayaan xariiqda xigta — taasi waa marka align-content uu la wareego, isagoo kala fariisinaya xariiqyada sidii koox ahaan. Gap wuxuu dejiyaa masaafada u dhaxaysa walxaha, iyo xariiqyada, iyadoo aan la isticmaalin margins.

Ma loo isticmaali karaa qalabkan in lagu dhisayo qaababka caanka ah? Haa, qalabkani wuxuu ku habboon yahay dhisidda qaababka caanka ah ee naqshadaynta websaydhada. Waxaad u isticmaali kartaa inaad si dhakhso ah u dhaliso koodka CSS ee loogu talagalay walxaha dhexda la dhigo, baararka hagidda (navigation bars), isku-dul-tuurka walxaha, kaadhadhka, ama dhinacyada shaqada (sidebars).

Dhaliyaha CSS Cubic BezierJiid labada gacan si aad u qaabayso qalooca, daawo dhibic raacaysa marka la barbardhigo mid joogto ah, oo koobiyeey qiimaha cubic-bezier().Dhaliyaha Border RadiusU wareeji gees kasta adigoo isticmaalaya jiidado, ku qaabeey qaabab dabiici ah habka elliptical-ka, oo si degdeg ah u koobiyeey CSS-ka.Dhaliyaha Box ShadowJiid jiidadaha si aad u qaabayso box-shadow, isku dul radd lakabyo si aad u hesho qoto-dheer, oo si degdeg ah u koobiyeey CSS-ka dhammaaday.Dhaliyaha GradientDhis gradient linear, radial, ama conic ah, ku dar istaagyada midabka oo dejiso jihada, ka dibna ku koobiyeey CSS-ka hal gujin.Dhaliyaha CSS GridDejiso tiirarkaaga iyo safarkaaga, ku jiid unugyada dushooda si aad u dhigto walxaha, oo ku koobiyeey grid CSS-ka iyo HTML-ka u dhigma hal gujin.Xisaabiyaha CSS clamp()Geli cabbir loogu talagalay shaashadaha yaryar iyo kuwa waaweyn si aad u hesho qiimo dabiici ah oo clamp() ah oo si habsmooth ah ugu dhex miisaamaya — ee cabbirrada farta, padding, margins ama gaps.Beddelaha MidabkaU beddel midabada HEX, RGB, HSL, HSV, CMYK iyo LAB — wax ka beddel goob kasta oo inta kale ayaa cusboonaysiismaya markaad gasho.