Flex
සම්පූර්ණ ප්‍රතිචාරාත්මක flexbox උපයෝගිතා කට්ටලයක් සමඟ ජාලක තීරු, සංචාලනය, සංරචක සහ තවත් දේවල පිරිසැලසුම, පෙළගැස්වීම සහ ප්‍රමාණය ඉක්මනින් කළමනාකරණය කරන්න. වඩාත් සංකීර්ණ ක්‍රියාත්මක කිරීම් සඳහා, අභිරුචි CSS අවශ්‍ය විය හැකිය.
flex හැසිරීම් සබල කරන්න
displayflexbox බහාලුමක් නිර්මාණය කිරීමට සහ සෘජු ළමා මූලද්‍රව්‍ය නම්‍ය අයිතම බවට පරිවර්තනය කිරීමට උපයෝගිතා යොදන්න . 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.d-xxl-flex.d-xxl-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.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-column-reverse
අන්තර්ගතය සාධාරණීකරණය කරන්න
justify-contentප්‍රධාන අක්ෂයේ ඇති නම්‍ය අයිතම පෙළගැස්වීම වෙනස් කිරීමට flexbox බහාලුම්වල උපයෝගිතා භාවිතා කරන්න (ආරම්භ කිරීමට x-අක්ෂය, y-axis නම් flex-direction: column). ( බ්‍රවුසරයේ startපෙරනිමි), end, center, between, around, හෝ evenly.
<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>
<div class="d-flex justify-content-evenly">...</div>
සඳහා ප්‍රතිචාරාත්මක වෙනස්කම් ද පවතී justify-content.
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-xxl-start.justify-content-xxl-end.justify-content-xxl-center.justify-content-xxl-between.justify-content-xxl-around.justify-content-xxl-evenly
අයිතම පෙළගස්වන්න
හරස් අක්ෂය මත flex අයිතම පෙළගැස්වීම වෙනස් කිරීමට flexbox බහාලුම්වල උපයෝගිතා භාවිතා කරන්න align-items(ආරම්භ කිරීමට 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.align-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-stretch
ස්වයං පෙළගස්වන්න
align-selfහරස් අක්ෂයේ (ආරම්භ කිරීමට y-අක්ෂය, x-අක්ෂය නම් flex-direction: column) ඒවායේ පෙළගැස්ම තනි තනිව වෙනස් කිරීමට flexbox අයිතමවල උපයෝගිතා භාවිතා කරන්න . එකම විකල්ප වලින් තෝරන්න 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.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-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-xxl-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.flex-xxl-{grow|shrink}-0.flex-xxl-{grow|shrink}-1
ස්වයංක්‍රීය මායිම්
ඔබ ස්වයංක්‍රීය මායිම් සමඟ නම්‍ය පෙළගැස්වීම් මිශ්‍ර කරන විට Flexbox හට ඉතා අපූරු දේවල් කිහිපයක් කළ හැකිය. ස්වයංක්‍රීය මායිම් හරහා flex අයිතම පාලනය කිරීමේ උදාහරණ තුනක් පහත දැක්වේ: පෙරනිමිය (ස්වයං ආන්තිකය), අයිතම දෙකක් දකුණට තල්ලු කිරීම ( .me-auto) සහ අයිතම දෙකක් වමට තල්ලු කිරීම ( .ms-auto).
<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="me-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="ms-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-xxl-nowrap.flex-xxl-wrap.flex-xxl-wrap-reverse
නියෝග
උපයෝගිතා අතලොස්සක් සමඟ නිශ්චිත flex අයිතමවල දෘශ්‍ය අනුපිළිවෙල වෙනස් කරන්න . orderඅපි අයිතමයක් ප්‍රථමයෙන් හෝ අවසාන වශයෙන් සෑදීම සඳහා විකල්ප පමණක් සපයන අතර, DOM ඇණවුම භාවිත කිරීමට යළි පිහිටුවීමක් පමණක් සපයන්නෙමු. order0 සිට 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-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xxl-0.order-xxl-1.order-xxl-2.order-xxl-3.order-xxl-4.order-xxl-5
ඊට අමතරව අනුපිළිවෙලින් සහ , යෙදීමෙන් මූලද්‍රව්‍ය වෙනස් කරන ප්‍රතිචාරාත්මක සහ පන්ති .order-firstද .order-lastඇත .orderorder: -1order: 6
.order-first.order-last.order-sm-first.order-sm-last.order-md-first.order-md-last.order-lg-first.order-lg-last.order-xl-first.order-xl-last.order-xxl-first.order-xxl-last
අන්තර්ගතය පෙළගස්වන්න
හරස් අක්ෂය මත flex අයිතම එකටalign-content පෙළගස්වා ගැනීමට flexbox බහාලුම්වල උපයෝගිතා භාවිතා කරන්න . ( බ්‍රවුසරයේ පෙරනිමි), , , , , හෝ . මෙම උපයෝගිතා ප්‍රදර්ශනය කිරීම සඳහා, අපි නම්‍ය අයිතම සංඛ්‍යාව බලාත්මක කර වැඩි කර ඇත.startendcenterbetweenaroundstretchflex-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-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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
මාධ්ය වස්තුව
Bootstrap 4 වෙතින් මාධ්ය වස්තු සංරචකය අනුකරණය කිරීමට බලාපොරොත්තු වන්නේද? පෙරට වඩා වැඩි නම්‍යශීලී බවක් සහ අභිරුචිකරණයකට ඉඩ සලසන නම්‍යශීලී උපයෝගිතා කිහිපයක් සමඟින් එය කෙටි කාලයකින් ප්‍රතිනිර්මාණය කරන්න.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>ඔබට පින්තූරයට යාබද අන්තර්ගතය සිරස් අතට මධ්‍යගත කිරීමට අවශ්‍ය යැයි පවසන්න:
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>සාස්
උපයෝගිතා API
Flexbox උපයෝගිතා අපගේ උපයෝගිතා API හි ප්‍රකාශ කර ඇත scss/_utilities.scss. උපයෝගිතා API භාවිතා කරන්නේ කෙසේදැයි ඉගෙන ගන්න.
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),