اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
Check
in English

فلیکس

د ځواب ویونکي فلیکس باکس اسانتیاو بشپړ سویټ سره د ګریډ کالمونو ، نیویګیشن ، اجزاو او نور ډیر څه ترتیب ، ترتیب او اندازه کول په چټکۍ سره اداره کړئ. د ډیرو پیچلو تطبیقونو لپاره، دودیز CSS ممکن اړین وي.

د انعطاف چلند فعال کړئ

د فلیکس displayبکس کانټینر جوړولو لپاره اسانتیاوې پلي کړئ او د ماشومانو مستقیم عناصر په فلیکس توکو بدل کړئ. د فلیکس کانټینرونه او توکي د اضافي فلیکس ملکیتونو سره نور هم ترمیم کیدی شي.

زه د فلیکس بکس کانټینر یم!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
زه د انلاین فلیکس باکس کانټینر یم!
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

هدایت

د فلیکس توکو سمت په فلیکس کانټینر کې د سمت اسانتیاو سره تنظیم کړئ. په ډیری قضیو کې تاسو کولی شئ دلته افقی ټولګي پریږدئ ځکه چې د براوزر ډیفالټ دی row. په هرصورت، تاسو ممکن د داسې شرایطو سره مخ شئ چیرې چې تاسو اړتیا لرئ دا ارزښت په واضح ډول تنظیم کړئ (لکه ځواب ورکوونکي ترتیبونه).

د افقی سمت ټاکلو لپاره وکاروئ .flex-row(د براوزر ډیفالټ) ، یا .flex-row-reverseد مخالف اړخ څخه افقی سمت پیل کولو لپاره.

فلیکس توکي 1
فلیکس توکي 2
فلیکس توکي 3
فلیکس توکي 1
فلیکس توکي 2
فلیکس توکي 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د مخالف لوري څخه عمودی سمت پیل کړئ.

فلیکس توکي 1
فلیکس توکي 2
فلیکس توکي 3
فلیکس توکي 1
فلیکس توکي 2
فلیکس توکي 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د فلیکس بکس کانټینرونو کې اسانتیاوې وکاروئ ترڅو په اصلي محور کې د فلیکس توکو سیده بدل کړئ (د پیل لپاره x-axis، y-axis if flex-direction: column). startله (د براوزر ډیفالټ) څخه غوره کړئ ، end, center, between, around, or 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

توکي ترتیب کړئ

په کراس محور کې د فلیکس توکو سیده بدلولو لپاره د فلیکس بکس کانټینرونو کې اسانتیاوې وکاروئ align-items(د پیل کولو لپاره y-محور، x-axis if 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-axis، x-axis if 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
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

ډکول

ټولګي د وروڼو عناصرو په لړۍ کې وکاروئ .flex-fillترڅو دوی د دوی محتوياتو سره مساوي پلنوالي ته مجبور کړي (یا مساوي پلنوالی که د دوی محتويات د دوی له پولو بکسونو څخه نه تیریږي) پداسې حال کې چې ټول موجود افقی ځای نیسي.

د ډیری مینځپانګې سره فلیکس توکي
فلیکس توکي
فلیکس توکي
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-grow-1عناصر ټول موجود ځای کاروي چې دا کولی شي، پداسې حال کې چې پاتې دوه فلیکس توکي د دوی اړین ځای ته اجازه ورکوي.

فلیکس توکي
فلیکس توکي
دریم فلیکس توکي
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-shrink-1مجبور دي چې خپل محتويات یوې نوې کرښې ته وتړي، "کمیدل" ترڅو د مخکیني فلیکس توکي لپاره ډیر ځای ته اجازه ورکړي .w-100.

فلیکس توکي
فلیکس توکي
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

اتومات حاشیې

فلیکس باکس کولی شي یو څه خورا په زړه پوري شیان ترسره کړي کله چې تاسو د اتوماتیک حاشیو سره د فلیکس ترتیبونه ګډ کړئ. لاندې ښودل شوي د آٹو حاشیو له لارې د فلیکس توکو کنټرول کولو درې مثالونه دي: ډیفالټ (د اتومات حاشیې نه) ، دوه توکي ښیې ته فشار ورکول ( .me-auto) ، او دوه توکي چپ لوري ته فشار ورکول ( .ms-auto).

فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
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.

فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
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.

فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
<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

امر

د یو څو اسانتیاوو سره د ځانګړو فلیکس توکو لید ترتیب بدل کړئ . orderموږ یوازې د لومړي یا وروستي توکي جوړولو لپاره اختیارونه چمتو کوو ، په بیله بیا د DOM امر کارولو لپاره ری سیٹ. لکه څنګه چې orderد 0 څخه تر 5 پورې کوم بشپړ ارزښت اخلي، د اړتیا وړ اضافي ارزښتونو لپاره دودیز CSS اضافه کړئ.

لومړی فلیکس توکي
دوهم فلیکس توکي
دریم فلیکس توکي
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ټولګي هم شتون لري چې په ترتیب سره د پلي کولو او په ترتیب سره orderد عنصر بدلوي.order: -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

محتوا ترتیب کړئ

د فلیکس بکس کانټینرونو کې اسانتیاوې وکاروئ align-contentترڅو فلیکس توکي د کراس محور سره یوځای کړئ. startله (د براوزر ډیفالټ) څخه غوره کړئ ، end, center, between, around, or 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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

د رسنیو اعتراض

د بوټسټریپ 4 څخه د میډیا اعتراض اجزا نقل کولو په لټه کې یاست ؟ دا په هیڅ وخت کې د یو څو انعطاف وړ اسانتیاو سره بیا جوړ کړئ چې د پخوا په پرتله حتی ډیر انعطاف او دودیز کولو ته اجازه ورکوي.

Placeholder Image
دا د رسنیو برخې څخه ځینې مینځپانګې دي. تاسو کولی شئ دا د هر ډول مینځپانګې سره بدل کړئ او د اړتیا سره سم یې تنظیم کړئ.
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>

او ووایه چې تاسو غواړئ په عمودي توګه د عکس تر څنګ مینځپانګه مرکز کړئ:

Placeholder Image
دا د رسنیو برخې څخه ځینې مینځپانګې دي. تاسو کولی شئ دا د هر ډول مینځپانګې سره بدل کړئ او د اړتیا سره سم یې تنظیم کړئ.
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>

ساس

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