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.

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.