Source

فلیکس

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

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

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

زه د فلیکس بکس کانټینر یم!
<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

هدایت

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

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

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

فلیکس توکي 1
فلیکس توکي 2
فلیکس توکي 3
فلیکس توکي 1
فلیکس توکي 2
فلیکس توکي 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د فلیکس بکس کانټینرونو کې اسانتیاوې وکاروئ ترڅو په اصلي محور کې د فلیکس توکو سیده بدل کړئ (د پیل لپاره 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

ډکول

ټولګي د وروڼو عناصرو په لړۍ کې وکاروئ .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-grow-*د موجود ځای ډکولو لپاره د فلیکس توکي د ودې لپاره وړتیا بدلولو لپاره اسانتیاوې وکاروئ . په لاندې مثال کې، .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-shrink-1اړ ایستل کیږي چې خپل محتويات یوې نوې کرښې ته وغځوي، "کمیدل" ترڅو د مخکیني فلیکس توکي لپاره ډیر ځای اجازه ورکړي .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

اتومات حاشیې

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

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

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

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

امر

د یو څو اسانتیاوو سره د ځانګړو فلیکس توکو لید ترتیب بدل کړئ . orderموږ یوازې د لومړي یا وروستي توکي جوړولو لپاره اختیارونه چمتو کوو ، په بیله بیا د DOM امر کارولو لپاره ری سیٹ. لکه څنګه orderچې کوم عددي ارزښت اخلي (د مثال په توګه 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-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