فلکس

رفتارهای انعطاف پذیر را فعال کنید

از ابزارهای 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
• .d-xxl-flex
• .d-xxl-inline-flex

جهت

جهت اقلام فلکس را در یک ظرف فلکس با ابزارهای جهت تنظیم کنید. در بیشتر موارد می توانید کلاس افقی را در اینجا حذف کنید زیرا پیش فرض مرورگر است row. با این حال، ممکن است با موقعیت‌هایی مواجه شوید که نیاز به تنظیم صریح این مقدار داشته باشید (مانند طرح‌بندی‌های پاسخ‌گو).

برای .flex-rowتنظیم یک جهت افقی (پیش فرض مرورگر)، یا .flex-row-reverseبرای شروع جهت افقی از سمت مخالف استفاده کنید.

<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برای شروع جهت عمودی از طرف مقابل استفاده کنید.

<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 برای شروع، محور y اگر flex-direction: column) استفاده کنید. از start(پیش‌فرض مرورگر)،،،،، یا endرا انتخاب کنید .centerbetweenaroundevenly

<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ابزارهای کاربردی در موارد flexbox استفاده کنید تا به صورت جداگانه تراز آنها را در محور متقاطع تغییر دهید (محور 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">
  <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المان‌ها از تمام فضای موجود استفاده می‌کنند، در حالی که به دو مورد باقی‌مانده اجازه می‌دهد که فضای لازم را انعطاف‌پذیر کنند.

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

<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

حاشیه های خودکار

هنگامی که ترازهای انعطاف پذیر را با حاشیه های خودکار ترکیب می کنید، Flexbox می تواند کارهای بسیار عالی انجام دهد. در زیر سه نمونه از کنترل موارد انعطاف‌پذیر از طریق حاشیه‌های خودکار نشان داده شده است: پیش‌فرض (بدون حاشیه خودکار)، فشار دادن دو مورد به سمت راست ( .me-auto) و فشار دادن دو مورد به سمت چپ ( .ms-auto).

<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منتقل کنید.

<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 سفارشی را برای هر مقدار اضافی مورد نیاز اضافه کنید.

<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-lastorderorder: -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را انتخاب کنید . برای نشان دادن این ابزارها، تعداد موارد انعطاف پذیر را اعمال کرده و افزایش داده ایم.centerbetweenaroundstretchflex-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

شی رسانه ای

آیا به دنبال تکرار مولفه مدیا شی از 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>

ساس

Utilities API

ابزارهای Flexbox در API ابزارهای ما در اعلان شده اند scss/_utilities.scss. با نحوه استفاده از Utilities 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,
      ),
    ),