Bootstrap 4:Flex
از کلاس‌های flex برتی کنترل چیدمان مؤلفه‌های بوت استرپ ۴ استفاده می‌شود.[۱]
Flexbox
بزرگترین تفاوت بین بوت استرپ ۳ و بوت استرپ ۴ این است که بوت استرپ ۴ بجای floatها از flexbox برای مدیریت چیدمان استفاده می‌کند.
ماژول چیدمان جعبه منعطف، طراحی ساختار چیدمتن واکنش گرا را بدون float یا مکان‌یابی (به انگلیسی: Positioning) بهتر می‌کند. اگر با flex ناآشنا هستید، 
نکته:می‌توانید در آموزش 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.
در مثال زیر برروی کلیدها کلیک کنید تا تفاوت بین این پنج کلاس را با تغییر 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 ] |
منابع آموزشی