Source

فلیکس

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

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

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

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

هدایت

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

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

فلیکس توکي 1
فلیکس توکي 2
فلیکس توکي 3
فلیکس توکي 1
فلیکس توکي 2
فلیکس توکي 3
<div class="d-flex flex-row">
  <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
<div class="d-flex flex-column">
  <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

محتوا توجیه کول

justify-contentد فلیکس بکس کانټینرونو کې اسانتیاوې وکاروئ ترڅو په اصلي محور کې د فلیکس توکو سیده بدل کړئ (د پیل لپاره x-axis، y-axis if flex-direction: column). څخه غوره کړئ ( د startبراوزر ډیفالټ)،،،، یا .endcenterbetweenaround

فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
<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(د پیل کولو لپاره 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-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

اتومات حاشیې

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

له بده مرغه، IE10 او IE11 په سمه توګه د فلیکس توکو په اړه د آٹو حاشیو ملاتړ نه کوي چې مور او پلار یې غیر ډیفالټ justify-contentارزښت لري. د نورو جزیاتو لپاره دا StackOverflow ځواب وګورئ.

فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
<div class="d-flex">
  <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">
  <div class="mr-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">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

د الین - توکو سره

په عمودی توګه یو انعطاف شی د کانټینر پورتنۍ یا ښکته ته د align-items, flex-direction: column, او margin-top: autoیا مخلوط کولو په واسطه حرکت وکړئ margin-bottom: auto.

فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
فلیکس توکي
<div class="d-flex align-items-start flex-column" 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" 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

امر

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

لومړی فلیکس توکي
دوهم فلیکس توکي
دریم فلیکس توکي
<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-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

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

د فلیکس بکس کانټینرونو کې اسانتیاوې وکاروئ 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-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