Flex
සම්පූර්ණ ප්රතිචාරාත්මක flexbox උපයෝගිතා කට්ටලයක් සමඟ ජාලක තීරු, සංචාලනය, සංරචක සහ තවත් දේවල පිරිසැලසුම, පෙළගැස්වීම සහ ප්රමාණය ඉක්මනින් කළමනාකරණය කරන්න. වඩාත් සංකීර්ණ ක්රියාත්මක කිරීම් සඳහා, අභිරුචි CSS අවශ්ය විය හැකිය.
display
flexbox බහාලුමක් නිර්මාණය කිරීමට සහ සෘජු ළමා මූලද්රව්ය නම්ය අයිතම බවට පරිවර්තනය කිරීමට උපයෝගිතා යොදන්න . Flex බහාලුම් සහ අයිතම අතිරේක නම්ය ගුණ සමඟින් තවදුරටත් වෙනස් කළ හැක.
.d-flex
සහ සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී .d-inline-flex
.
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
දිශා උපයෝගිතා සහිත flex කන්ටේනරයක flex අයිතමවල දිශාව සකසන්න. බොහෝ අවස්ථාවලදී බ්රවුසරයේ පෙරනිමිය ලෙස ඔබට මෙහි තිරස් පන්තිය මඟ හැරිය හැක row
. කෙසේ වෙතත්, ඔබට මෙම අගය පැහැදිලිව සැකසීමට අවශ්ය අවස්ථා (ප්රතිචාරාත්මක පිරිසැලසුම් වැනි) ඔබට මුහුණ දීමට සිදු විය හැක.
.flex-row
තිරස් දිශාවක් සැකසීමට (බ්රවුසරයේ පෙරනිමිය) හෝ .flex-row-reverse
ප්රතිවිරුද්ධ පැත්තේ සිට තිරස් දිශාව ආරම්භ කිරීමට භාවිතා කරන්න .
.flex-column
සිරස් දිශාවක් සැකසීමට හෝ .flex-column-reverse
විරුද්ධ පැත්තේ සිට සිරස් දිශාව ආරම්භ කිරීමට භාවිතා කරන්න .
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී flex-direction
.
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
justify-content
ප්රධාන අක්ෂයේ ඇති නම්ය අයිතම පෙළගැස්වීම වෙනස් කිරීමට flexbox බහාලුම්වල උපයෝගිතා භාවිතා කරන්න (ආරම්භ කිරීමට x-අක්ෂය, y-axis නම් flex-direction: column
). ( බ්රවුසරයේ start
පෙරනිමි), end
, center
, between
, හෝ around
.
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී justify-content
.
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
හරස් අක්ෂය මත flex අයිතම පෙළගැස්වීම වෙනස් කිරීමට flexbox බහාලුම්වල උපයෝගිතා භාවිතා කරන්න align-items
(ආරම්භ කිරීමට y-අක්ෂය, x-අක්ෂය නම් flex-direction: column
). start
, end
, center
, baseline
, හෝ stretch
(බ්රවුසර පෙරනිමියෙන්) තෝරන්න .
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී align-items
.
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
align-self
හරස් අක්ෂයේ (ආරම්භ කිරීමට y-අක්ෂය, x-අක්ෂය නම් flex-direction: column
) ඒවායේ පෙළගැස්ම තනි තනිව වෙනස් කිරීමට flexbox අයිතමවල උපයෝගිතා භාවිතා කරන්න . එකම විකල්ප වලින් තෝරන්න align-items
: start
, end
, center
, baseline
, හෝ stretch
(බ්රවුසරයේ පෙරනිමිය).
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී align-self
.
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.flex-fill
ලබා ගත හැකි සියලු තිරස් ඉඩ ලබා ගනිමින් සමාන පළලකට බල කිරීමට සහෝදර මූලද්රව්ය මාලාවක් මත පන්තිය භාවිතා කරන්න . සමාන-පළල, හෝ යුක්ති සහගත, සංචාලනය සඳහා විශේෂයෙන් ප්රයෝජනවත් වේ.
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
.flex-grow-*
පවතින ඉඩ පිරවීම සඳහා flex අයිතමයක වර්ධනය වීමේ හැකියාව ටොගල් කිරීමට උපයෝගිතා භාවිතා කරන්න . පහත උදාහරණයේ, .flex-grow-1
මූලද්රව්ය තමන්ට හැකි සියලුම ඉඩ භාවිතා කරන අතර, ඉතිරි නම්ය අයිතම දෙකට අවශ්ය ඉඩ ලබා දේ.
.flex-shrink-*
අවශ්ය නම් flex අයිතමයක හැකිලීමේ හැකියාව ටොගල් කිරීමට උපයෝගිතා භාවිතා කරන්න . පහත උදාහරණයේ, සමඟ ඇති දෙවන flex අයිතමයට .flex-shrink-1
එහි අන්තර්ගතය නව පේළියකට එතීමට බල කෙරෙනු ඇත, සමඟ පෙර නම්ය අයිතමයට වැඩි ඉඩක් ලබා දීම සඳහා “හැකිළීම” .w-100
.
flex-grow
සහ සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී flex-shrink
.
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
ඔබ ස්වයංක්රීය මායිම් සමඟ නම්ය පෙළගැස්වීම් මිශ්ර කරන විට Flexbox හට ඉතා අපූරු දේවල් කිහිපයක් කළ හැකිය. ස්වයංක්රීය මායිම් හරහා flex අයිතම පාලනය කිරීමේ උදාහරණ තුනක් පහත දැක්වේ: පෙරනිමිය (ස්වයං ආන්තිකය), අයිතම දෙකක් දකුණට තල්ලු කිරීම ( .mr-auto
) සහ අයිතම දෙකක් වමට තල්ලු කිරීම ( .ml-auto
).
අවාසනාවන්ත ලෙස, IE10 සහ IE11 මාපියන්ට පෙරනිමි නොවන justify-content
අගයක් ඇති flex අයිතමවල ස්වයංක්රීය ආන්තික සඳහා නිසි ලෙස සහාය නොදක්වයි. වැඩි විස්තර සඳහා මෙම StackOverflow පිළිතුර බලන්න.
align-items
මිශ්ර කිරීම flex-direction: column
මගින් එක් නම්ය අයිතමයක් කන්ටේනරයක ඉහළට හෝ පහළට සිරස් අතට ගෙන margin-top: auto
යන්න margin-bottom: auto
.
නම්ය අයිතම නම්ය බහාලුමක ඔතා ගන්නා ආකාරය වෙනස් කරන්න. සමඟ එතීමකින් තොරව (බ්රවුසරයේ පෙරනිමිය) .flex-nowrap
, සමඟ එතීම .flex-wrap
හෝ ප්රතිලෝම එතීම තෝරන්න .flex-wrap-reverse
.
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී flex-wrap
.
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
උපයෝගිතා අතලොස්සක් සමඟ නිශ්චිත flex අයිතමවල දෘශ්ය අනුපිළිවෙල වෙනස් කරන්න . order
අපි අයිතමයක් ප්රථමයෙන් හෝ අවසාන වශයෙන් සෑදීම සඳහා විකල්ප පමණක් සපයන අතර, DOM ඇණවුම භාවිත කිරීමට යළි පිහිටුවීමක් පමණක් සපයන්නෙමු. ඕනෑම නිඛිල අගයක් ගන්නා පරිදි order
(උදා, 5
), අවශ්ය ඕනෑම අමතර අගයක් සඳහා අභිරුචි CSS එක් කරන්න.
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී order
.
.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12
හරස් අක්ෂය මත flex අයිතම එකටalign-content
පෙළගස්වා ගැනීමට flexbox බහාලුම්වල උපයෝගිතා භාවිතා කරන්න . ( බ්රවුසරයේ පෙරනිමි), , , , , හෝ . මෙම උපයෝගිතා ප්රදර්ශනය කිරීම සඳහා, අපි නම්ය අයිතම සංඛ්යාව බලාත්මක කර වැඩි කර ඇත.start
end
center
between
around
stretch
flex-wrap: wrap
දැනුම්දීම! මෙම ගුණාංගය නම්ය අයිතමවල තනි පේළියකට බලපෑමක් නැත.
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී align-content
.
.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch