فلکس

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

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

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

<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 اگر 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ابزارهای کاربردی در موارد 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

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

هنگامی که ترازهای انعطاف پذیر را با حاشیه های خودکار ترکیب می کنید، Flexbox می تواند کارهای بسیار عالی انجام دهد. در زیر سه نمونه از کنترل موارد انعطاف‌پذیر از طریق حاشیه‌های خودکار نشان داده شده است: پیش‌فرض (بدون حاشیه خودکار)، فشار دادن دو مورد به سمت راست ( .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را انتخاب کنید . برای نشان دادن این ابزارها، تعداد موارد انعطاف پذیر را اعمال کرده و افزایش داده ایم.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-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