Flex

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	شروع
۳	ظرف‌ها
۴	شبکه‌بندی پایه
۵	تایپوگرافی
۶	رنگ‌ها
۷	جدول‌ها
۸	تصاویر
۹	جامبوترون
۱۰	هشدارها
۱۱	کلیدها
۱۲	گروه‌های کلید
۱۳	نشان‌ها (Badges)
۱۴	نوارهای پیشرفت
۱۵	Spinnerها
۱۶	صفحه‌بندی
۱۷	گروه‌های لیست
۱۸	کارت‌ها
۱۹	منوهای کرکره‌ای
۲۰	Collapse
۲۱	Navها
۲۲	Navbar
۲۳	فرم‌ها
۲۴	ورودی‌ها
۲۵	گروه‌های ورودی
۲۶	فرم‌های سفارشی
۲۷	Carousel
۲۸	Modal
۲۹	راهنمای ابزار
۳۰	Popover
۳۱	Toast
۳۲	Scrollspy
۳۳	امکانات
۳۴	Flex
۳۵	آیکن‌ها
۳۶	Media Objects
۳۷	فیلترها
شبکه‌بندی
Theme
مرجع

از کلاس‌های flex برتی کنترل چیدمان مؤلفه‌های بوت استرپ ۴ استفاده می‌شود.

Flexbox

بزرگترین تفاوت بین بوت استرپ ۳ و بوت استرپ ۴ این است که بوت استرپ ۴ بجای floatها از flexbox برای مدیریت چیدمان استفاده می‌کند.

ماژول چیدمان جعبه منعطف، طراحی ساختار چیدمتن واکنش گرا را بدون float یا مکان‌یابی (به انگلیسی: Positioning) بهتر می‌کند. اگر با flex ناآشنا هستید، <translate> نکته</translate>  نکته: می‌توانید در آموزش CSS Flexbox بیشتر در مورد آن مطالعه کنید.

توجه: flexbox در IE9 و نسخه‌های قدیمی‌تر پشتیبانی نمی‌شود.

اگر نیازمند پشتیبانی IE9 هستید، از بوت استرپ۳ استفاده کنید. زیرا پایدارتین نسخهٔ بوت استرپ است و همچنان توسط تیم بوت استرپ برای bugfixهای مهم و تغییرات مستندسازی پشتیبانی می‌شود. با این حال، هیچ ویژگی‌های جدیدی به آن اضافه نمی‌شود.

برای ایجاد ظرف flexbox و تبدیل فرزندان بی واسطه به آیتم‌های flex، از کلاس d-flex استفاده کنید

مثال

1 <div class="d-flex p-3 bg-secondary text-white">
2   <div class="p-2 bg-info">Flex item 1</div>
3   <div class="p-2 bg-warning">Flex item 2</div>
4   <div class="p-2 bg-primary">Flex item 3</div>
5 </div>

مشاهدهٔ نتیجه

برای ایجاد ظرف یک flex درون خطی، از کلاس d-inline-flex استفاده کنید:

مثال

1 <div class="d-inline-flex p-3 bg-secondary text-white">
2   <div class="p-2 bg-info">Flex item 1</div>
3   <div class="p-2 bg-warning">Flex item 2</div>
4   <div class="p-2 bg-primary">Flex item 3</div>
5 </div>

مشاهدهٔ نتیجه

جهت افقی

از .flex-row برای نمایش افقی آیتم‌های flex (به فارسی: کنار هم) استفاده کنید. این حالت پیش فرض است.

نکته: از .flex-row-reverse برای راست‌چین کردن جهت افقی استفاده کنید:

مثال

 1 <div class="d-flex flex-row bg-secondary">
 2   <div class="p-2 bg-info">Flex item 1</div>
 3   <div class="p-2 bg-warning">Flex item 2</div>
 4   <div class="p-2 bg-primary">Flex item 3</div>
 5 </div>
 6 
 7 <div class="d-flex flex-row-reverse bg-secondary">
 8   <div class="p-2 bg-info">Flex item 1</div>
 9   <div class="p-2 bg-warning">Flex item 2</div>
10   <div class="p-2 bg-primary">Flex item 3</div>
11 </div>

مشاهدهٔ نتیجه

جهت عمودی

از .flex-column برای نمایش آیتم‌های flex بطور عمودی (بالای یکدیگر) یا برای معکوس کردن جهت عمودی از .flex-column-reverse استفاده کنید:

مثال

 1 <div class="d-flex flex-column">
 2   <div class="p-2 bg-info">Flex item 1</div>
 3   <div class="p-2 bg-warning">Flex item 2</div>
 4   <div class="p-2 bg-primary">Flex item 3</div>
 5 </div>
 6 
 7 <div class="d-flex flex-column-reverse">
 8   <div class="p-2 bg-info">Flex item 1</div>
 9   <div class="p-2 bg-warning">Flex item 2</div>
10   <div class="p-2 bg-primary">Flex item 3</div>
11 </div>

مشاهدهٔ نتیجه

Justify کردن محتوا

از کلاس‌های .justify-content-* برای تغییر alignment آیتم‌های flex استفاده کنید. کلاس‌های معتبر شامل start (پیش فرض)، end, center, between یاaround هستند:

مثال

1 <div class="d-flex justify-content-start">...</div>
2 <div class="d-flex justify-content-end">...</div>
3 <div class="d-flex justify-content-center">...</div>
4 <div class="d-flex justify-content-between">...</div>
5 <div class="d-flex justify-content-around">...</div>

مشاهدهٔ نتیجه

عرض‌های مساوی / Fill

از .flex-fill روی آیتم‌های flex استفاده کنید تا عرض‌های آنها مساوی شود:

مثال

1 <div class="d-flex">
2   <div class="p-2 bg-info flex-fill">Flex item 1</div>
3   <div class="p-2 bg-warning flex-fill">Flex item 2</div>
4   <div class="p-2 bg-primary flex-fill">Flex item 3</div>
5 </div>

مشاهدهٔ نتیجه

رشد

برای اشغال کردن فضای باقیمانده، از .flex-grow-1 روی یک آیتم flex استفاده کنید. در مثال زیر، دو آیتم flex اول فضای مورد نیاز خود را اشغال می‌کنند، درحالیکه آیتم آخر همهٔ فضای باقیمانده را اشغال می‌کند:

مثال

1 <div class="d-flex">
2   <div class="p-2 bg-info">Flex item 1</div>
3   <div class="p-2 bg-warning">Flex item 2</div>
4   <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
5 </div>

مشاهدهٔ نتیجه

نکته: از .flex-shrink-1 روی آیتم flex استفاده کنید تا در صورت لزوم آنرا فشرده کنید.

ترتیب

ترتیب بصری آیتم(ها) را با کلاس‌های .order می‌توان تغییر داد. کلاس‌های معتبر از ۰ تا ۱۲ هستند بطوری که کمترین عدد بالاترین اولویت را دارد (order-1 قبل از order-2 و … نمایش داده می‌شود):

مثال

1 <div class="d-flex bg-secondary">
2   <div class="p-2 bg-info order-3">Flex item 1</div>
3   <div class="p-2 bg-warning order-2">Flex item 2</div>
4   <div class="p-2 bg-primary order-1">Flex item 3</div>
5 </div>

مشاهدهٔ نتیجه

حاشیه‌های خودکار (به انگلیسی: Auto Margins)

با .mr-auto به راحتی به آیتم‌های flex حاشیه اضافه کنید (آیتم را به سمت راست ببرید) یا با .mr-auto (آیتم را به سمت چپ ببرید):

مثال

 1 <div class="d-flex bg-secondary">
 2   <div class="p-2 mr-auto bg-info">Flex item 1</div>
 3   <div class="p-2 bg-warning">Flex item 2</div>
 4   <div class="p-2 bg-primary">Flex item 3</div>
 5 </div>
 6 
 7 <div class="d-flex bg-secondary">
 8   <div class="p-2 bg-info">Flex item 1</div>
 9   <div class="p-2 bg-warning">Flex item 2</div>
10   <div class="p-2 ml-auto bg-primary">Flex item 3</div>
11 </div>

مشاهدهٔ نتیجه

Wrap

کنترل اینکه آیتم‌های flex چگونه داخل یک Container (به فارسی: ظرف) flex قرار بگیرند، بوسیلهٔ کلاس‌های .flex-nowrap (پیش فرض)، .flex-nowrap یا .flex-wrap-reverse انجام می‌شود.

برای مشاهدهٔ تفاوت بین این سه کلاس با تغییر wrapping آیتم‌های flex برروی کلیدها در کادر مثال کلیک کنید:

مثال

1 <div class="d-flex flex-wrap">..</div>
2 
3 <div class="d-flex flex-wrap-reverse">..</div>
4 
5 <div class="d-flex flex-nowrap">..</div>

مشاهدهٔ نتیجه

نحوهٔ قرارگیری (به انگلیسی: Align) محتوا

با کلاس‌های .align-content-* نحوه قرارگیری عمودی آیتم‌های جمع شده flex را می‌توان کنترل کرد. کلاس‌های معتبر عبارتند از : .align-content-start (پیش فرض)، .align-content-end ,.align-content-center ,.align-content-between , .align-content-around و .align-content-stretch.

توجه: این کلاس‌ها هیچ اثری برروی ردیف‌های تکی آیتم‌های flex ندارند.

در مثال زیر برروی کلیدها کلیک کنید تا تفاوت بین این پنج کلاس را با تغییر alignment عمودی آیتم‌های flex مشاهده کنید:

مثال

1 <div class="d-flex flex-wrap align-content-start">..</div>
2 
3 <div class="d-flex flex-wrap align-content-end">..</div>
4 
5 <div class="d-flex flex-wrap align-content-center">..</div>
6 
7 <div class="d-flex flex-wrap align-content-around">..</div>
8 
9 <div class="d-flex flex-wrap align-content-stretch">..</div>

مشاهدهٔ نتیجه

نحوه قرارگیری (به انگلیسی: Align) آیتم‌ها

Alignment عمودی یک ردیف از آیتم‌های flex را با کلاس‌های .align-items-* می‌توان کنترل کرد. کلاس‌های معتبر عبارتند از : .align-items-start, .align-items-end, .align-items-center, .align-items-baseline و .align-items-stretch (پیش فرض).

برای مشاهده تفاوت این پنج کلاس، برروی کلیدهای زیر کلیک کنید:

مثال

1 <div class="d-flex align-items-start">..</div>
2 
3 <div class="d-flex align-items-end">..</div>
4 
5 <div class="d-flex align-items-center">..</div>
6 
7 <div class="d-flex align-items-baseline">..</div>
8 
9 <div class="d-flex align-items-stretch">..</div>

مشاهدهٔ نتیجه

Align Self

با استفاده ارز کلاس‌های .align-self-* نحوه قرارگیری یک آیتم flex خاص را می‌توان کنترل کرد. کلاس‌های معتبر عبارتند از : .align-self-start ,.align-self-end ,.align-self-center ,.align-self-baseline و .align-self-stretch (پیش فرض).

برای مشاهده تفاوت این پنج کلاس، برروی کلیدهای زیر کلیک کنید:

مثال

1 <div class="d-flex bg-light" style="height:150px">
2   <div class="p-2 border">Flex item 1</div>
3   <div class="p-2 border align-self-start">Flex item 2</div>
4   <div class="p-2 border">Flex item 3</div>
5 </div>

مشاهدهٔ نتیجه

کلاس‌های Flex واکنش گرا

همهٔ کلاس‌های flex کلاس‌های واکنش گرای اضافی دارند، که تنظیم یک کلاس flex خاص را در یک صفحه نمایش خاص آسان می‌کند.

نماد * را می‌توان با sm, md, lg یا xl جایگزین کزد که نشان دهندهٔ صفحه نمایش‌های کوچک، متوسط، بزرگ و خیلی بزرگ هستند.

کلاس	توضیح	مثال
ظرف Flex
.d-*-flex	طرف flexbox را برای صفحه نمایش‌های مختلف ایجاد می‌کند	نتیجه
.d-*-inline-flex	طرف flexbox درون خطی را برای صفحه نمایش‌های مختلف ایجاد می‌کند	نتیجه
جهت
.flex-*-row	آیتم‌های flex را بطور افقی در صفحه نمایش‌های مختلف نشان می‌دهد	نتیجه
.flex-*-row-reverse	آیتم‌های flex را بطور افقی و راست-چین در صفحه نمایش‌های مختلف نشان می‌دهد	نتیجه
.flex-*-column	آیتم‌های flex را بطور عمودی در صفحه نمایش‌های مختلف نشان می‌دهد	نتیجه
.flex-*-column-reverse	آیتم‌های flex را بطور عمودی و با ترتیب معکوس در صفحه نمایش‌های مختلف نشان می‌دهد	نتیجه
محتوای justify شده
.justify-content-*-start	آیتم‌های flex را از ابتدا (چپ‌چین) در صفحه نمایش‌های مختلف نشان می‌دهد	نتیجه
.justify-content-*-end	آیتم‌های flex را از ابتدا (راست‌چین) در صفحه نمایش‌های مختلف نشان می‌دهد	نتیجه
.justify-content-*-center	آیتم‌های flex را در مرکز ظرف flex صفحه نمایش‌های مختلف نشان می‌دهد	نتیجه
.justify-content-*-between	آیتم‌های flex را در «میان» در صفحه نمایش‌های مختلف نشان می‌دهد	نتیجه
.justify-content-*-around	آیتم‌های flex را «در اطراف» در صفحه نمایش‌های مختلف نشان می‌دهد	نتیجه
عرض برابر / Fill
.flex-*-fill	آیتم‌های flex را به عرض‌های برابر در صفحه نمایش‌های مختلف نمایش می‌دهد	نتیجه
رشد (به انگلیسی: Grow)
.flex-*-grow-0	از رشد آیتم‌ها در صفحه نمایش‌های مختلف جلوگیری می‌کند
.flex-*-grow-1	آیتم‌ها را در صفحه نمایش‌های مختلف رشد می‌دهد
فشرده (به انگلیسی: Shrink)
.flex-*-shrink-0	از فشرده شدن آیتم‌ها در صفحه نمایش‌های مختلف جلوگیری می‌کند
.flex-*-shrink-1	آیتم‌ها را در صفحه نمایش‌های مختلف فشرده می‌کند
ترتیب
.order-*-0-12	ترتیب را از ۰ تا ۱۲ در صفحه نمایش‌های کوچک تغییر می‌دهد	نتیجه
Wrap
.flex-*-nowrap	آیتم‌ها را در صفحه نمایش‌های متفاوت wrap نمی‌کند	نتیجه
.flex-*-wrap	آیتم‌ها را در صفحه نمایش‌های متفاوت wrap می‌کند	نتیجه
.flex-*-wrap-reverse	Wrapping آیتم‌ها را در صفحه نمایش‌های متفاوت معکوس می‌کند	نتیجه
نحوه قرارگیری محتوا
.align-content-*-start	Align آیتم‌های جمع شده از ابتدا در صفحه نمایش‌های متفاوت	نتیجه
.align-content-*-end	Align آیتم‌های جمع شده از در انتها در صفحه نمایش‌های متفاوت	نتیجه
.align-content-*-center	Align آیتم‌های جمع شده در مرکز صفحه نمایش‌های متفاوت	نتیجه
.align-content-*-around	Align آیتم‌های جمع شده «در اطراف» در صفحه نمایش‌های متفاوت	نتیجه
.align-content-*-stretch	کشیدن آیتم‌های جمع شده در صفحه نمایش‌های مختلف	نتیجه
نحوه قرار گرفتن آیتم‌ها
.align-items-*-start	Align یک ردیف از آیتم‌ها از ابتدا در صفحه نمایش‌های مختلف	نتیجه
.align-items-*-end	Align یک ردیف از آیتم‌ها در انتها در صفحه نمایش‌های مختلف	نتیجه
.align-items-*-center	Align یک ردیف از آیتم‌ها در مرکز در صفحه نمایش‌های مختلف	نتیجه
.align-items-*-baseline	Align یک ردیف از آیتم‌ها در baseline در صفحه نمایش‌های مختلف	نتیجه
.align-items-*-stretch	کشیدن ردیفی از آیتم‌ها در صفحه نمایش‌های متفاوت	نتیجه
Align Self
.align-self-*-start	Align یک آیتم flex از ابتدا در صفحه نمایش‌های مختلف	نتیجه
.align-self-*-end	Align یک آیتم flex در انتها در صفحه نمایش‌های مختلف	نتیجه
.align-self-*-center	Align یک آیتم flex در مرکز در صفحه نمایش‌های مختلف	نتیجه
.align-self-*-baseline	Align یک آیتم flex در baseline در صفحه نمایش‌های مختلف	نتیجه
.align-self-*-stretch	کشیدن یک آیتم flex در صفحه نمایش‌های متفاوت	نتیجه

صفحهٔ بعد»

«صفحهٔ قبل