فلێکس

ڕەفتارەکانی فلیکس چالاک بکە

سوودمەندییەکان بەکاربهێنە 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
• .d-xxl-flex
• .d-xxl-inline-flex

ئاڕاستە

ئاراستەی شتە فلیکسەکان لەناو دەفرێکی فلیکسدا دابنێ کە سوودمەندییەکانی ئاراستەیان تێدایە. لە زۆربەی حاڵەتەکاندا دەتوانیت پۆلی ئاسۆیی لێرەدا نەهێڵیت چونکە پێشوەختەی وێبگەڕەکە row. بەڵام لەوانەیە تووشی دۆخێک بیت کە پێویستت بە دانانی ڕوونی ئەم بەهایە بوو (وەک نەخشە وەڵامدەرەوەکان).

بەکاری بهێنە .flex-rowبۆ دانانی ئاراستەی ئاسۆیی (بەپێی پێشوەختەی وێبگەڕەکە)، یان .flex-row-reverseبۆ دەستپێکردنی ئاراستەی ئاسۆیی لە لایەنی بەرامبەرەوە.

<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بۆ دەستپێکردنی ئاراستەی ڕاست لە لای بەرامبەرەوە.

<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
• .flex-xxl-row
• .flex-xxl-row-reverse
• .flex-xxl-column
• .flex-xxl-column-reverse

ڕەوایەتی بە ناوەڕۆک بدە

سوودمەندییەکان لەسەر دەفرەکانی فلیکسبۆکس بەکاربهێنە justify-contentبۆ گۆڕینی ڕێکخستنی شتەکانی فلیکس لەسەر میحوەر سەرەکی (میحوەر x بۆ دەستپێکردن، میحوەر y ئەگەر flex-direction: column). startلە (بەپێی پێشوەختەی وێبگەڕ)، end, center, between, around, یان هەڵبژێرە 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 ئەگەر 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 بۆ دەستپێکردن، میحوەر x ئەگەر 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بۆ ئەوەی ناچاریان بکەیت بە پانایی یەکسان بە ناوەڕۆکەکەیان (یان پانایی یەکسان ئەگەر ناوەڕۆکەکەیان لە سندوقە سنوورییەکانیان تێپەڕ نەکات) لە کاتێکدا هەموو فەزای ئاسۆیی بەردەست بگرە.

<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-xxl-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
• .flex-xxl-{grow|shrink}-0
• .flex-xxl-{grow|shrink}-1

پەراوێزی ئۆتۆماتیکی

فلێکسبۆکس دەتوانێت چەند شتێکی زۆر سەرسوڕهێنەر ئەنجام بدات کاتێک ڕێکخستنی فلێکس لەگەڵ پەراوێزی ئۆتۆماتیکی تێکەڵ دەکەیت. لە خوارەوە سێ نموونەی کۆنترۆڵکردنی بابەتە فلیکسەکان لە ڕێگەی پەراوێزی ئۆتۆماتیکیەوە نیشان دراوە: پێشوەختە (بێ پەراوێزی ئۆتۆماتیکی)، پاڵنانی دوو بابەتە بۆ لای ڕاست ( .me-auto)، و پاڵنانی دوو بابەتە بۆ لای چەپ ( .ms-auto).

<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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>

لەگەڵ align-items

یەک شتێکی فلیکس بە شێوەی ڕاست بگوازەرەوە بۆ سەرەوە یان خوارەوەی دەفرێک بە تێکەڵکردنی 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
• .flex-xxl-nowrap
• .flex-xxl-wrap
• .flex-xxl-wrap-reverse

فەرمان

ڕێزبەندی بینراوی شتە فلیکسە تایبەتەکان بگۆڕە بە مشتێک orderسوودمەند. ئێمە تەنها بژاردەکان بۆ دروستکردنی بابەتێک یەکەم یان کۆتا دابین دەکەین، هەروەها ڕێستێک بۆ بەکارهێنانی فەرمانی DOM. وەک چۆن orderهەر بەهایەکی ژمارەیەکی تەواو لە 0 بۆ 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-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: -1و order: 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, یان هەڵبژێرە 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
• .align-content-xxl-start
• .align-content-xxl-end
• .align-content-xxl-center
• .align-content-xxl-around
• .align-content-xxl-stretch

ئۆبجێکتی میدیایی

بەدوای دووبارەکردنەوەی پێکهاتەی ئۆبجێکتی میدیا لە Bootstrap 4 دەگەڕێیت؟ لە ماوەیەکی کەمدا دووبارە دروستی بکەرەوە بە چەند سوودمەندیەکی فلیکس کە ڕێگە بە نەرمی و خۆکارکردنی زیاتر دەدات لە پێشوو.

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

وە بڵێ دەتەوێت ناوەڕۆکەکە بە شێوەی ڕاست لە تەنیشت وێنەکەدا سەنتەری بکەیت:

<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 ی سوودمەندیەکان

سوودمەندییەکانی فلێکسبۆکس لە 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
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "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,
      ),
    ),