Bootstrap 4:Flex

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (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>

[bootstrap4trybs_flex مشاهدهٔ نتیجه]


برای ایجاد ظرف یک 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>

[bootstrap4trybs_flex-inline مشاهدهٔ نتیجه]


جهت افقی

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

[bootstrap4trybs_flex-direction مشاهدهٔ نتیجه]


جهت عمودی

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

[bootstrap4trybs_flex-direction-col مشاهدهٔ نتیجه]


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>

[bootstrap4trybs_flex-justify مشاهدهٔ نتیجه]


عرض‌های مساوی / 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>

[bootstrap4trybs_flex-fill مشاهدهٔ نتیجه]


رشد

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

[bootstrap4trybs_flex-grow مشاهدهٔ نتیجه]

نکته: از .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>

[bootstrap4trybs_flex-order مشاهدهٔ نتیجه]


حاشیه‌های خودکار (به انگلیسی: 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>

[bootstrap4trybs_flex-auto-margins مشاهدهٔ نتیجه]


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>

[bootstrap4trybs_flex-wrap مشاهدهٔ نتیجه]


نحوهٔ قرارگیری (به انگلیسی: 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>

[bootstrap4trybs_flex-align-content مشاهدهٔ نتیجه]


نحوه قرارگیری (به انگلیسی: 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>

[bootstrap4trybs_flex-align-items مشاهدهٔ نتیجه]


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>

[bootstrap4trybs_flex-align-self مشاهدهٔ نتیجه]

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

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

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

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


منابع آموزشی