Flex

සම්පූර්ණ ප්‍රතිචාරාත්මක flexbox උපයෝගිතා කට්ටලයක් සමඟ ජාලක තීරු, සංචාලනය, සංරචක සහ තවත් දේවල පිරිසැලසුම, පෙළගැස්වීම සහ ප්‍රමාණය ඉක්මනින් කළමනාකරණය කරන්න. වඩාත් සංකීර්ණ ක්‍රියාත්මක කිරීම් සඳහා, අභිරුචි CSS අවශ්‍ය විය හැකිය.

මෙම පිටුවේ

flex හැසිරීම් සබල කරන්න

displayflexbox බහාලුමක් නිර්මාණය කිරීමට සහ සෘජු ළමා මූලද්‍රව්‍ය නම්‍ය අයිතම බවට පරිවර්තනය කිරීමට උපයෝගිතා යොදන්න . Flex බහාලුම් සහ අයිතම අතිරේක නම්‍ය ගුණ සමඟින් තවදුරටත් වෙනස් කළ හැක.

මම flexbox කන්ටේනරයක්!

html

<div class="d-flex p-2">I'm a flexbox container!</div>

මම inline flexbox බහාලුමක්!

html

<div class="d-inline-flex p-2">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ප්‍රතිවිරුද්ධ පැත්තේ සිට තිරස් දිශාව ආරම්භ කිරීමට භාවිතා කරන්න .

Flex අයිතමය 1

Flex අයිතමය 2

Flex අයිතමය 3

Flex අයිතමය 1

Flex අයිතමය 2

Flex අයිතමය 3

html

<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

.flex-columnසිරස් දිශාවක් සැකසීමට හෝ .flex-column-reverseවිරුද්ධ පැත්තේ සිට සිරස් දිශාව ආරම්භ කිරීමට භාවිතා කරන්න .

Flex අයිතමය 1

Flex අයිතමය 2

Flex අයිතමය 3

Flex අයිතමය 1

Flex අයිතමය 2

Flex අයිතමය 3

html

<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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 .

Flex අයිතමය

<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(බ්‍රවුසර පෙරනිමියෙන්) තෝරන්න .

Flex අයිතමය

<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(බ්‍රවුසරයේ පෙරනිමිය).

Flex අයිතමය

පෙළගස්වන ලද flex අයිතමය

Flex අයිතමය

පෙළගස්වන ලද flex අයිතමය

Flex අයිතමය

පෙළගස්වන ලද flex අයිතමය

Flex අයිතමය

පෙළගස්වන ලද flex අයිතමය

Flex අයිතමය

පෙළගස්වන ලද flex අයිතමය

Flex අයිතමය

<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ලබා ගත හැකි සියලු තිරස් ඉඩ ලබා ගනිමින් ඔවුන්ගේ අන්තර්ගතයට සමාන පළලකට (හෝ ඒවායේ අන්තර්ගතය ඔවුන්ගේ මායිම් පෙට්ටිය ඉක්මවා නොයන්නේ නම් සමාන පළලකට) බල කිරීමට සහෝදර මූලද්‍රව්‍ය මාලාවක් මත පන්තිය භාවිතා කරන්න .

බොහෝ අන්තර්ගතයන් සහිත Flex අයිතමය

Flex අයිතමය

html

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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මූලද්‍රව්‍ය තමන්ට හැකි සියලුම ඉඩ භාවිතා කරන අතර, ඉතිරි නම්‍ය අයිතම දෙකට අවශ්‍ය ඉඩ ලබා දේ.

Flex අයිතමය

තුන්වන flex අයිතමය

html

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

.flex-shrink-*අවශ්‍ය නම් flex අයිතමයක හැකිලීමේ හැකියාව ටොගල් කිරීමට උපයෝගිතා භාවිතා කරන්න . පහත උදාහරණයේ, සමඟ ඇති දෙවන flex අයිතමයට .flex-shrink-1එහි අන්තර්ගතය නව පේළියකට එතීමට බලකෙරෙන අතර, පෙර ඇති flex අයිතමය සඳහා වැඩි ඉඩක් ලබා දීම සඳහා “හැකිළීම” සිදු වේ .w-100.

Flex අයිතමය

html

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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).

Flex අයිතමය

html

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

පෙළගස්වන අයිතම සමඟ

align-itemsමිශ්‍ර කිරීම flex-direction: columnමගින් එක් නම්‍ය අයිතමයක් කන්ටේනරයක ඉහළට හෝ පහළට සිරස් අතට ගෙන margin-top: autoයන්න margin-bottom: auto.

Flex අයිතමය

html

<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

ඔතා

නම්‍ය අයිතම නම්‍ය බහාලුමක ඔතා ගන්නා ආකාරය වෙනස් කරන්න. සමඟ එතීමකින් තොරව (බ්‍රවුසරයේ පෙරනිමිය) .flex-nowrap, සමඟ එතීම .flex-wrapහෝ ප්‍රතිලෝම එතීම තෝරන්න .flex-wrap-reverse.

Flex අයිතමය

<div class="d-flex flex-nowrap">
  ...
</div>

Flex අයිතමය

<div class="d-flex flex-wrap">
  ...
</div>

Flex අයිතමය

<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 එක් කරන්න .

පළමු flex අයිතමය

දෙවන flex අයිතමය

තුන්වන flex අයිතමය

html

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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

දැනුම්දීම! මෙම ගුණාංගය නම්‍ය අයිතමවල තනි පේළියකට බලපෑමක් නැත.

Flex අයිතමය

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Flex අයිතමය

<div class="d-flex align-content-end flex-wrap">...</div>

Flex අයිතමය

<div class="d-flex align-content-center flex-wrap">...</div>

Flex අයිතමය

<div class="d-flex align-content-between flex-wrap">...</div>

Flex අයිතමය

<div class="d-flex align-content-around flex-wrap">...</div>

Flex අයිතමය

<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
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-between
.align-content-xxl-around
.align-content-xxl-stretch

මාධ්ය වස්තුව

Bootstrap 4 වෙතින් මාධ්‍ය වස්තු සංරචකය අනුකරණය කිරීමට බලාපොරොත්තු වන්නේද? පෙරට වඩා වැඩි නම්‍යශීලී බවක් සහ අභිරුචිකරණයකට ඉඩ සලසන නම්‍යශීලී උපයෝගිතා කිහිපයක් සමඟින් එය කෙටි කාලයකින් ප්‍රතිනිර්මාණය කරන්න.

මෙය මාධ්‍ය සංරචකයක අන්තර්ගතයකි. ඔබට මෙය ඕනෑම අන්තර්ගතයකින් ප්‍රතිස්ථාපනය කර අවශ්‍ය පරිදි සකස් කළ හැක.

html

<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>

ඔබට පින්තූරයට යාබද අන්තර්ගතය සිරස් අතට මධ්‍යගත කිරීමට අවශ්‍ය යැයි පවසන්න:

html

<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
    ),
    "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,
      ),
    ),