in English

فلکس

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

پر کنید

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

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

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