Source

Flex

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

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

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

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

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

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

<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ප්‍රතිවිරුද්ධ පැත්තේ සිට තිරස් දිශාව ආරම්භ කිරීමට භාවිතා කරන්න .

Flex අයිතමය 1

Flex අයිතමය 2

Flex අයිතමය 3

Flex අයිතමය 1

Flex අයිතමය 2

Flex අයිතමය 3

<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විරුද්ධ පැත්තේ සිට සිරස් දිශාව ආරම්භ කිරීමට භාවිතා කරන්න .

Flex අයිතමය 1

Flex අයිතමය 2

Flex අයිතමය 3

Flex අයිතමය 1

Flex අයිතමය 2

Flex අයිතමය 3

<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-axis නම් flex-direction: column). ( බ්‍රවුසරයේ startපෙරනිමිය), end, center, between, හෝ around.

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>

සඳහා ප්‍රතිචාරාත්මක වෙනස්කම් ද පවතී 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(බ්‍රවුසර පෙරනිමියෙන්) තෝරන්න .

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

පුරවන්න

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

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

Flex අයිතමය

<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මූලද්‍රව්‍ය තමන්ට හැකි සියලුම ඉඩ භාවිතා කරන අතර, ඉතිරි නම්‍ය අයිතම දෙකට අවශ්‍ය ඉඩ ලබා දේ.

Flex අයිතමය

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

<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එහි අන්තර්ගතය නව පේළියකට එතීමට බල කෙරෙනු ඇත, සමඟ පෙර නම්‍ය අයිතමයට වැඩි ඉඩක් ලබා දීම සඳහා “හැකිළීම” .w-100.

Flex අයිතමය

<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 පිළිතුර බලන්න.

Flex අයිතමය

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

Flex අයිතමය

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

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 අයිතමවල දෘශ්‍ය අනුපිළිවෙල වෙනස් කරන්න . orderඅපි අයිතමයක් ප්‍රථමයෙන් හෝ අවසාන වශයෙන් සෑදීම සඳහා විකල්ප පමණක් සපයන අතර, DOM ඇණවුම භාවිත කිරීමට යළි පිහිටුවීමක් පමණක් සපයන්නෙමු. ඕනෑම නිඛිල අගයක් ගන්නා පරිදි order(උදා, 5), අවශ්‍ය ඕනෑම අමතර අගයක් සඳහා අභිරුචි CSS එක් කරන්න.

පළමු flex අයිතමය

දෙවන flex අයිතමය

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

<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 බහාලුම්වල උපයෝගිතා භාවිතා කරන්න . ( බ්‍රවුසරයේ පෙරනිමි), , , , , හෝ . මෙම උපය��ගිතා ප්‍රදර්ශනය කිරීම සඳහා, අපි නම්‍ය අයිතම සංඛ්‍යාව බලාත්මක කර වැඩි කර ඇත.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-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