Flex
ප්රතිචාරාත්මක flexbox උපයෝගිතා සම්පූර්ණ කට්ටලයක් සමඟ ජාලක තීරු, සංචාලනය, සංරචක සහ තවත් දේවල පිරිසැලසුම, පෙළගැස්වීම සහ ප්රමාණය ඉක්මනින් කළමනාකරණය කරන්න. වඩාත් සංකීර්ණ ක්රියාත්මක කිරීම් සඳහා, අභිරුචි CSS අවශ්ය විය හැකිය.
flex හැසිරීම් සබල කරන්න
display
flexbox බහාලුමක් නිර්මාණය කිරීමට සහ සෘජු ළමා මූලද්රව්ය නම්ය අයිතම බවට පරිවර්තනය කිරීමට උපයෝගිතා යොදන්න . Flex බහාලුම් සහ අයිතම අතිරේක නම්ය ගුණ සමඟින් තවදුරටත් වෙනස් කළ හැක.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
.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
ප්රතිවිරුද්ධ පැත්තේ සිට තිරස් දිශාව ආරම්භ කිරීමට භාවිතා කරන්න .
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
.flex-column
සිරස් දිශාවක් සැකසීමට හෝ .flex-column-reverse
විරුද්ධ පැත්තේ සිට සිරස් දිශාව ආරම්භ කිරීමට භාවිතා කරන්න .
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී 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-අක්ෂය නම් flex-direction: column
). ( බ්රවුසරයේ start
පෙරනිමිය), end
, center
, between
, හෝ around
.
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී 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
අයිතම පෙළගස්වන්න
align-items
හරස් අක්ෂයේ නම්ය අයිතම පෙළගැස්වීම වෙනස් කිරීමට flexbox බහාලුම්වල උපයෝගිතා භාවිතා කරන්න (ආරම්භ කිරීමට y-අක්ෂය, x-අක්ෂය නම් flex-direction: column
). start
, end
, center
, baseline
, හෝ stretch
(බ්රවුසර පෙරනිමියෙන්) තෝරන්න .
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී 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
ස්වයං පෙළගස්වන්න
හරස් අක්ෂයේ (ආරම්භ කිරීමට y අක්ෂය, x අක්ෂය නම් ) align-self
තනි තනිව වෙනස් කිරීමට flexbox අයිතමවල උපයෝගිතා භාවිතා කරන්න . flex-direction: column
එකම විකල්ප වලින් තෝරන්න align-items
: start
, end
, center
, baseline
, හෝ stretch
(බ්රවුසරයේ පෙරනිමිය).
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී 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
ලබා ගත හැකි සියලු තිරස් ඉඩ ලබා ගනිමින් ඔවුන්ගේ අන්තර්ගතයට සමාන පළලකට (හෝ ඒවායේ අන්තර්ගතය ඔවුන්ගේ මායිම් පෙට්ටිය ඉක්මවා නොයන්නේ නම් සමාන පළලකට) බල කිරීමට සහෝදර මූලද්රව්ය මාලාවක් මත පන්තිය භාවිතා කරන්න .
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
වර්ධනය හා හැකිලීම
.flex-grow-*
පවතින ඉඩ පිරවීම සඳහා flex අයිතමයක වර්ධනය වීමේ හැකියාව ටොගල් කිරීමට උපයෝගිතා භාවිතා කරන්න . පහත උදාහරණයේ, .flex-grow-1
මූලද්රව්ය තමන්ට හැකි සියලුම ඉඩ භාවිතා කරන අතර, ඉතිරි නම්ය අයිතම දෙකට අවශ්ය ඉඩ ලබා දේ.
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>
.flex-shrink-*
අවශ්ය නම් flex අයිතමයක හැකිලීමේ හැකියාව ටොගල් කිරීමට උපයෝගිතා භාවිතා කරන්න . පහත උදාහරණයේ, සමඟ ඇති දෙවන flex අයිතමයට .flex-shrink-1
එහි අන්තර්ගතය නව පේළියකට එතීමට බලකෙරෙන අතර, පෙර ඇති flex අයිතමය සඳහා වැඩි ඉඩක් ලබා දීම සඳහා “හැකිළීම” සිදු වේ .w-100
.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
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 පිළිතුර බලන්න.
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="mr-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>
පෙළගස්වන අයිතම සමඟ
align-items
, flex-direction: column
සහ margin-top: auto
හෝ මිශ්ර කිරීමෙන් එක් නම්ය අයිතමයක් සිරස් අතට කන්ටේනරයක ඉහළට හෝ පහළට ගෙන යන්න margin-bottom: auto
.
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>
ඔතා
නම්ය අයිතම නම්ය බහාලුමක ඔතා ගන්නා ආකාරය වෙනස් කරන්න. සමඟින් එතීමකින් තොරව (බ්රවුසරයේ පෙරනිමිය) .flex-nowrap
, සමඟ එතීම .flex-wrap
හෝ ප්රතිලෝම එතීමෙන් තෝරන්න .flex-wrap-reverse
.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී 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 එක් කරන්න.
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී 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
දැනුම්දීම! මෙම ගුණාංගය නම්ය අයිතමවල තනි පේළියකට බලපෑමක් නැත.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<div class="d-flex align-content-stretch flex-wrap">...</div>
සඳහා ප්රතිචාරාත්මක වෙනස්කම් ද පවතී align-content
.
.align-content-start
.align-content-end
.align-content-center
.align-content-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch